user2301515 user2301515 - 4 months ago 20
CSS Question

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.

Answer

You can use the orientation constraint:

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

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

See MDN.