Differentiating portrait and landscape versions in media queries

Question

I've got these media queries set. But how do I edit this to have separate media queries set for the portrait, landscape versions (e.g.: iPad, iPhone)?

@media only screen and (min-width : 1824px) {}

@media only screen and (min-width: 1200px) and (max-width: 1823px) {}    

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

@media only screen and (min-width: 768px) and (max-width: 991px) {}

@media only screen and (max-width: 767px) {}

@media only screen and (max-width: 480px) {}

http://stackoverflow.com/questions/5735467/css-media-queries-is-it-possible-to-detect-portrait-landscape-tablet-mode — Philip Dernovoy, Jun 03 '15 at 05:09
@PhilipDernovoy thanks. But I can not fit the `and (orientation:portrait)` into my css. Coz for an example neither `@media only screen and (min-width: 768px) and (max-width: 991px) {}` or `@media only screen and (max-width: 767px) {}` can be used for a iPad (1024x768) landscape version. — Becky, Jun 03 '15 at 05:18
Maybe that can help you https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ — Philip Dernovoy, Jun 03 '15 at 05:42
@PhilipDernovoy thanks. If I use `media (max-width: 1024) and (orientation: landscape) {}` wont that affect the existing media query for large desktops and laptops `@media only screen and (min-width: 1200px) and (max-width: 1823px) {}` ? — Becky, Jun 03 '15 at 05:48
It won't affect coz `max-width: 1024px` and `min-width: 1200px` not intersect. And you must specify units of measure in your rules. — Philip Dernovoy, Jun 03 '15 at 05:58

Mustaghees · Answer 1 · 2015-06-03T06:01:58.630

1

@media only screen and ( orientation: portrait ) {}

@media only screen and ( orientation: landscape) {}

I think thats what you are looking for.

Edit:

I think by fit in to my css you mean this:

@media (max-width: whatever) and (orientation: landscape) {}

If you are asking for a suggestion that when to use portrait or landscape, then use landscape when width of viewport is more and vice versa.

max-width: 1024px will set an upper limit and it will not interfere with rules for range: 1200px-1823px.

edited Jun 03 '15 at 06:01

answered Jun 03 '15 at 05:14

Mustaghees

506
6
16

thanks I know I could use the and `orientation:` to do this but my questions is how do I fit it into my css? example iPad is 1024x768, so there should I use the `and ( orientation: landscape)` or `and ( orientation: portrait )` without affecting the desktop / laptop versions? – Becky Jun 03 '15 at 05:19
@Becky the format is width x height, so 1024x768 mean width is more. So you should use `landscape` – Mustaghees Jun 03 '15 at 05:33
So if I do `media (max-width: 1024) and (orientation: landscape) {}` wont that affect the existing media query for large desktops and laptops `@media only screen and (min-width: 1200px) and (max-width: 1823px) {} ` ? – Becky Jun 03 '15 at 05:47
@Becky i guess it will (not sure to what extent). – Mustaghees Jun 03 '15 at 05:49
That's exactly my question. How do I cope with this situation? – Becky Jun 03 '15 at 05:50
@Becky I was wrong. `max-width: 1024px` wont interfere with `min-width: 1200px and max-width: 1823px`, as `max-width: 1024px` sets an upper limit and its not in range of 1200-1823 – Mustaghees Jun 03 '15 at 05:58

score 0 · Accepted Answer · answered Jun 03 '15 at 06:10

We have to add orientation: portrait and orientation: landscape to your media screen.

iPad Landscape and Portrait

/* iPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

/* ur CSS */
}

/* iPad Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

For latest iPads use pixel ratio:2 (Retina display) .

-webkit-min-device-pixel-ratio: 2

Similarly for iPhone's, for iPhone's you have to set media for 4 different screens , < iPhone 4S , iPhone 5S and iPhone 6 and 6 plus versions.

Differentiating portrait and landscape versions in media queries

2 Answers2

Linked