user2301515 user2301515 - 2 months ago 6
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.


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.