Browser support for orientation (portrait and landscape)

Question

What is the browser support for the following?

CSS to detect screen orientation:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation

From How to detect the device orientation using CSS media queries?

I've looked at Can I Use. But it says it is only supported for 48% of users in the UK. Is that correct? Or am I looking at the wrong thing? I'm not interested in Screen.orientation or anything fancy. I just want to use different styles when the viewport is taller than it is wide.

EDIT: I think that orientation is part of the core media query and is therefore widely supported (around 98%), see https://www.w3.org/TR/css3-mediaqueries/

98% support for media queries, but when I looked up "orientation" on Can I Use the only thing I could find was "Screen Orientation" which is around 50%. So we think "orientation" comes under "media queries" and is widely supporterd? — Markeee, May 01 '18 at 10:22
It won't be IE 8 it will be carrier pigeons and smoke signals! — Markeee, May 01 '18 at 10:24

dmcknight · Answer 1 · 2018-12-05T22:59:17.897

Here's another way to set style sheet rules for landscape, square-like, and portrait layouts, when window width is not sufficient.

This example uses 7 and 8, so the 'square' styles are applied when the width and height are within 1/8th of each other's size. Using 9 and 10 will apply 'square' styles when the width and height are within 1/10th of each other. You must use numbers without decimals.

The code snippet works best in full-page view.

div {
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
  }

  #instructions {
    display:block;
    top:25%;
  }


  @media (max-aspect-ratio: 8/7) and (min-aspect-ratio: 7/8) {
    /* rules for square-ish layout */
    #square {
      display:block;
    }
  }

  @media (min-aspect-ratio: 8/7) {
    /* rules for landscape layout */
    #landscape {
      display:block;
    }
  }


  @media (max-aspect-ratio: 7/8) {
    /* rules for portrait layout */
    #portrait {
      display:block;
    }
  }

<div id="portrait">
  Portrait
</div>
<div id="square">
  Square
</div>
<div id="landscape">
  Landscape
</div>
<div id="instructions">
  Resize your window to change the aspect and apply different style rules
</div>

score 0 · Answer 2 · answered May 01 '18 at 10:20

0

Support for orientation in media queries looks like it's scarce at best according to the MDN. I'd advise against using them for critical responsiveness but might be handy as an experimental feature to test with.

Desktop support:

Mobile support:

answered May 01 '18 at 10:20

Yes I saw that. I'm confused. Tim suggests support is 98%. – Markeee May 01 '18 at 10:25
That's for the core Media Queries specification. The orientation feature is separate and so the 98% support figure is incorrect. – May 01 '18 at 10:28
This suggests that orientation is part of teh core Media Queries and therefor well supported https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – Markeee May 01 '18 at 10:29
It's part of the overall core specification for media queries, but is a separate implementation, an extension so to speak of it. That page lists everything currently available, but each individual feature has it's own compatibility requirements. – May 01 '18 at 10:33
I'm not convinced. Support for media queries is wide and I think 'orientation' is part of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Browser_compatibility – Markeee May 01 '18 at 10:44

Browser support for orientation (portrait and landscape)

2 Answers2