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?

Shivaree

Answer 1

Yes, using the following syntax:

@media all and (orientation: landscape) {}

See the w3 specs for more information.

Phraseologist

Thanks! Small follow-up question: what will happen when someone tilts his phone screen so that the orientation changes? Will the applied CSS change? – Shivaree

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. – Phraseologist

Answer 2

You can use orientation:

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

Marciano

Answer 3

From w3:

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

Firepower

Answer 4

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';
        }

    }

Stimulus

Can you please provide some examples/ research in support of your answer? – Unhandled

Here are the issues about the breakpoints firing when the keyboard appears. #8883663 – Stimulus

@Unhandled I do not need to provide research. When the keyboard shows on Android, the viewport resizes. They means breakpoints will change. – Stimulus

But you just did.. You provided an example in code whereas in your original post you didn't have any. Right? – Unhandled

@Unhandled 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. – Stimulus