Question 213761 in Html Question posted in
Some basic documentation can be found here.

Html – Showing specific content when mobile is in Landscape mode on website

Firstly, I wanted to lock the orientation to Portrait on my Webflow website, so if someone knows the solution for that, you can type it here:
text

As I see, this solution is hard to do, so, can anyone tell me how can I display certain content when a mobile device is in Landscape. Is there any code to detect when the device is in Landscape mode and than to show the message "Turn your Device in Portrait Mode for better experience"?

If anyone have the solution or knows some other post where the solution is explained, please answer.

I tried using this API https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation/lock
and it doesn’t work

Tags:

2

Answers


  1. 0

    There is the window.screen.orientation that displays whether the device is on portrait or landscape mode
    ScreenOrientation {angle: 0, type: ‘landscape-primary’, onchange: null}

    Here is some documentation on the compatibility and values for the orientation:
    https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

    Login or Signup to reply.
  2. 0

    One approach is below, using CSS media queries and with explanatory comments in the code:

    /* simple, minimal css reset; to remove browser default margin
   and padding, and ensuring that box-sizes include the padding
   and border sizes within their assigned size: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  block-size: 100vh;
  background-image: linear-gradient( to bottom right, hsl(300deg 90% 75% / 1), hsl(100deg 90% 75% / 1), hsl(200deg 90% 75% / 1));
  padding: 3vmin;
}

ol,
ul,
li {
  list-style-type: none;
}

main {
  border: 1px solid currentColor;
  block-size: 100%;
  padding: 2vmin;
}

.warning {
  background-color: hsl(11deg 80% 50% / 1);
  margin-block-end: 2vmin;
  padding: 1vmin;
  text-align: center;
}

ul {
  display: flex;
  /* using a CSS variable to set the flex-direction, the
     flex-flow property here is shorthand for:
        flex-direction: [row | column];
        flex-wrap: wrap;
     the default value for flex-direction is row.
   */
  flex-flow: var(--flexDirection) wrap;
  gap: 1vmin;
  justify-content: center;
}

li {
  aspect-ratio: 2;
  border: 1px solid currentColor;
  display: grid;
  padding: 0.5rem;
  place-content: center;
}

textarea {
  display: block;
  height: 2rem;
  margin-block: 1vmin;
  margin-inline: auto;
  padding: 0.5rem;
  width: 80%;
  transition: height 0.3s linear;
}

textarea:is(:active, :focus) {
  height: 8rem;
}

@media (orientation: landscape) {
   /* in landscape orientation the --flexDirection custom
      property is set to row,
      and the .warning element(s) are set to display: none;
   */
   :root {
    --flexDirection: row;
  }
  .warning {
    display: none;
  }
}

@media (orientation: portrait) {
   /* here, in portrait orientation, we set the --flexDirection
      custom property to column; and we display the .warning 
      element(s): */
   :root {
    --flexDirection: column;
  }
  .warning {
    display: block;
  }
}
    <main>
  <!-- an element to hide in landscape mode -->
  <aside class="warning">
    <p>No, really; this would look much better in landscape orientation!</p>
  </aside>
  <ul>
    <li>List element 01</li>
    <li>List element 02</li>
    <li>List element 03</li>
    <li>List element 04</li>
    <li>List element 05</li>
  </ul>
  <textarea></textarea>
</main>

    JS Fiddle demo.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search