Search code examples
browsercsstabletmedia-queries

How to detect the device orientation using CSS media queries?

In JavaScript the orientation mode can be detected using:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

However, is there a way to detect the orientation using CSS only?

Eg. something like:

@media only screen and (width > height) { ... }
Solution

  • 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