Search code examples
cssmedia-queriesorientation

CSS if else conditions, mobile portrait or landscape

How to use a with-height conditions. Without javascript.

@media (calc(window-width > window-height)) {
    background-color: lightblue;
}
@media (calc(window-width <= window-height)) {
    background-color: lightgray;                
}

I want to page for mobile defices for detecting if mobile is rotated to portrait or landscape.

Solution

  • You can use the orientation constraint:

    @media (orientation: landscape) {
    /* applies to devices in landscape mode */
}
@media (orientation: portrait) {
    /* applies to devices in portrait mode */
}

    Multiple rules are comma separated (OR), otherwise use AND.

    See MDN.