CSS if else conditions, mobile portrait or landscape

Question

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.

andreas · Accepted Answer · 2023-06-05T08:46:53.627

5

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.

edited Jun 05 '23 at 08:46

answered Aug 09 '16 at 09:57

andreas

16,357
12
72
76

Can somebody say how to put to work in Safary browser a css code like: – user2301515 Aug 09 '16 at 12:47
@media (min-width: 150vh) { .imageMap { height: 100%; width: 150vh; background-color: lightblue; } } – user2301515 Aug 09 '16 at 12:48
@media (max-width: 150vh) { .imageMap { width: 100%; height: 66vw; background-color: lightgray; } } – user2301515 Aug 09 '16 at 12:48

score 3 · Answer 2 · answered Aug 09 '16 at 09:55

3

Try this:

.something {
    background-color: lightblue;
}

@media (orientation: landscape) { 
    .something {
        background-color: lightgray;
    }
}

answered Aug 09 '16 at 09:55

Daniel Rossko Rosa

362
1
2
11

score 3 · Answer 3 · edited May 23 '17 at 12:16

You can use media queries with height also -

For example -

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

or you can use with orientation

@media (min-width: 700px) and (orientation: landscape) { ... }

And you can also use with height

@media (max-height: 700px), handheld and (orientation: landscape) { ... }

Some of my friend also post the MDN URL you can get more information from that.

This answer can be useful for you

score 2 · Answer 4 · answered Aug 09 '16 at 09:58

MDN docs:

orientation

Value: landscape | portrait

Media: visual

Accepts min/max prefixes: no

Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Example

To apply a style sheet only in portrait orientation:

@media all and (orientation: portrait) { ... }

Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

Bhojendra Rauniyar · Answer 5 · 2016-08-09T10:06:24.787

You cannot use calc method as the calc method is css property's value not property.

But you can combine media rule with max-width and min-width (paste the width or height value instead xxx):

@media(max-width:xxx) and (min-width: xxx){}
@media(min-width:xxx) and (max-height: xxx){}

You can also use more advanced media query like this:

@media all and (max-width: xxx) and (min-width: xxx), (min-width: xxx) {}

If you're trying to work with portrait and landscape, then you can do like this:

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Refer this reference that's all we have.

CSS if else conditions, mobile portrait or landscape

5 Answers5