CSS responsive design - detect portrait display

Question

I know it's with pure CSS possible to adapt the stylesheet according to screen dimensions, like this:

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

^(source)

Is it with pure css possible to check on a landscape or portrait display?

score 15 · Accepted Answer · answered May 04 '13 at 11:47

15

Yes, using the following syntax:

@media all and (orientation: landscape) {}

See the w3 specs for more information.

answered May 04 '13 at 11:47

mogelbrod

2,246
19
20

Thanks! Small follow-up question: what will happen when someone tilts his phone screen so that the orientation changes? Will the applied CSS change? – May 04 '13 at 11:55
I haven't checked myself but I'm pretty certain that's the case since other media queries (such and screen width) are re-checked. – mogelbrod May 05 '13 at 11:02

score 3 · Answer 2 · answered May 04 '13 at 11:48

3

You can use orientation:

@media all and (max-width: 959px) and (orientation : portrait) {
    /* Styles */
}

answered May 04 '13 at 11:48

Eli

14,779
5
59
77

score 2 · Answer 3 · answered May 04 '13 at 11:47

2

From w3:

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

answered May 04 '13 at 11:47

Vucko

20,555
10
56
107

Matt · Answer 4 · 2018-10-29T15:42:14.160

0

All answers are incorrect. Android will swap from portrait to landscape when the keyboard is shown.

Different keyboards also need testing as they can take up more vertical space. Swift keyboard takes up more vertical space so you cannot use solutions like @media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */} as this will fail on lots of phones.

The only solution is to use javascript.

On newer Android devices you can test and use the new window.screen.orientation api.

On iOS you can use window.orientation which works fine. ie Math.abs( window.orientation ) === 90 is landscape

And as a fallback you can use window.screen.width > window.screen.height which will cover really old Android devices which don't support the new window.screen.orientation api

Then all you need to do is add / remove a class on resize / orientationchange events.

/* Android Orientation */
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation || null;

    /* Check */
    if ( orientation && orientation.type ) {

        /* Landscape */
        if ( orientation.type === 'landscape' || orientation.type === 'landscape-primary' || orientation.type === 'landscape-secondary' ) {
            return 'landscape';

        /* Portrait */
        } else {                                
            return 'portrait';
        }

    }

edited Oct 29 '18 at 15:42

answered Mar 07 '18 at 15:50

Matt

81
4

Can you please provide some examples/ research in support of your answer? – kingJulian Mar 07 '18 at 16:16
Here are the issues about the breakpoints firing when the keyboard appears. https://stackoverflow.com/questions/8883163/css-media-query-soft-keyboard-breaks-css-orientation-rules-alternative-solut/8883535 – Matt Mar 08 '18 at 16:40
@kingJulian I do not need to provide research. When the keyboard shows on Android, the viewport resizes. They means breakpoints will change. – Matt Oct 29 '18 at 14:07
But you just did.. You provided an example in code whereas in your original post you didn't have any. Right? – kingJulian Oct 29 '18 at 14:16
@kingJulian The response was about providing research about the Android webview resizing when the keyboard is shown. I did add a link showing other people recognising the issue. Sorry I didn't realise this was after your original message. The example I just added was just to stop other people having to search for an Android solution. – Matt Oct 29 '18 at 15:47

CSS responsive design - detect portrait display

4 Answers4