CSS Media Features - Orientation

CSS orientation media feature is used to determine whether the device's screen or page is in a portrait or landscape orientation.

The orientation of the device is not always the same as the orientation of the screen. For example, if you open the soft keyboard on a device in portrait orientation, the screen will become wider than it is tall. In this case, the browser will use landscape styles instead of portrait styles.

Possible Values

  • portrait − This value is applied when the height of the viewport exceeds its width, which commonly indicates that a device is held vertically.

  • landscape − This value is applied when the width of the viewport is greater than its height, typically indicating that the device is held in a horizontal orientation.

Syntax

orientation: portrait|landscape;

CSS orientation - portrait Value

The following example demonstrates that when the device is in portrait orientation, the background color of the box changes to the green −

<html>
<head>
<style>
   iframe {
      display: block;
      height: 200px;
   }
</style>
</head>
<body>
   <label id="labelWidth" for="width"></label>
   <input id="width" type="range" min="120" max="250" step="4" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (orientation: portrait) { div { background: lightgreen; } } </style><div><h3>To see the effect resize your viewport's width.</h3> <p>When box is in portrait orientation background changes to green color, otherwise background color will remain white.</p> </div>">
   </iframe>
   
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
      };

      width.oninput = () => updateSize("width", labelWidth);
   </script>
</body>
</html>

CSS orientation - landscape Value

The following example demonstrates that when the device is in landscape orientation, the background color of the box changes to the yellow −

<html>
<head>
<style>
   iframe {
      display: block;
      height: 200px;
   }
</style>
</head>
<body>
   <label id="labelWidth" for="width"></label>
   <input id="width" type="range" min="120" max="250" step="4" />
   
   <iframe
   id="block"
   srcdoc="<style> @media (orientation: landscape) { div { background: yellow; } } </style><div><h3>To see the effect resize your viewport's width.</h3> <p>When box is in portrait orientation background changes to yellow color, otherwise background color will remain white.</p> </div>">
   </iframe>
   
   <script>
      const updateSize = (size, label) => {
         block.style[size] = `${eval(size).value}px`;
      };

      width.oninput = () => updateSize("width", labelWidth);
   </script>
</body>
</html>
Advertisements