How to Detect Device Orientation with CSS Media Queries

Screen orientation is somewhat different than device orientation. In contrast to the screen, a device does not have an ability to detect its orientation. Anyway, it’s useful to be able to control the screen orientation to maintain and adapt a web application’s interface.

There are several ways that you can use to handle screen orientation. This can be done both with CSS and Javascript. In this snippet, we’re interested in the solution with CSS.

Solution with CSS media queries

Below, we use the orientation @media query and let the content to adjust its layout depending on whether the browser window is in the landscape mode (the width is greater than the height) or portrait mode (the height is greater than the width).

So, in the following example, we set the flex-direction property to "row" for the orientation in the landscape mode and use the "column" value of the same property for the orientation in the portrait mode.

Example of adjusting a layout based on the screen orientation:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
      }
      div {
        background: #c579d1;
      }
      @media (orientation: landscape) {
        body {
          flex-direction: row;
        }
      }
      @media (orientation: portrait) {
        body {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <div>First box</div>
    <div>Second box</div>
    <div>Third box</div>
  </body>
</html>
Note that the CSS orientation media feature applies based on the orientation of the browser window or iframe, and not the device orientation. Opening the soft keyboard on many devices can make the viewport wider than its height, and this will cause the browser to use landscape styles instead of the portrait.

Example of using the CSS orientation media feature:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        border: 1px solid #666;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
      p {
        font: 16px sans-serif;
        margin: 0;
        padding: .5em;
      }
      ul {
        font: 14px monospace;
        list-style: none;
        margin: 0;
        padding: .5em;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: #9289d6;
      }
      li {
        display: inline-block;
        margin: 0;
        padding: 0.5em;
        background: #fff;
      }
      @media screen and (orientation: portrait) {
        #example {
          width: 100%;
        }
      }
      @media screen and (orientation: landscape) {
        #example {
          position: fixed;
          width: 2.65em;
          height: 100%;
        }
        p {
          margin-left: 2em;
        }
        li + li {
          margin-top: .5em;
        }
      }
    </style>
  </head>
  <body>
    <ul id="example">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
        an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        It has survived not only five centuries, but also the leap into electronic typesetting, 
        remaining essentially unchanged.
    </p>
  </body>
</html>