3

I have media queries written this way :

@media only screen and (max-device-width: 600px) and (orientation: portrait) {
.img-responsive{
    height : 200px;
    width : 100px;
}
}

@media only screen and (max-device-width: 600px) and (orientation: landscape) {
.img-responsive{
    width : 95px;
    height : 100px;
}
}

Portrait orientation works fine but for landscape orientation css doesn't seem to apply.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Debabrata Mohanta
  • 635
  • 7
  • 20
  • Avoid `max-device-*` and `min-device-*`, at least for testing in a desktop environment. http://stackoverflow.com/a/36749882/3597276 – Michael Benjamin Dec 11 '16 at 14:10
  • I was using chrome USB debugging which clearly showed me the portrait css being appied but not landscape – Debabrata Mohanta Dec 11 '16 at 14:18
  • Are both queries supposed to have identical `max-device-width` expressions? – Michael Benjamin Dec 11 '16 at 14:20
  • I am not sure .As nowadays mobile phone comes in different sizes so say if landscape is 480px and portrait is 320px then both should come should come under max-device-width : 600px.This is my assumption I may be wrong. – Debabrata Mohanta Dec 11 '16 at 14:24
  • 1
    My answer here may be useful to you: [**Common breakpoints for media queries on a responsive site**](http://stackoverflow.com/q/8564752/3597276) – Michael Benjamin Dec 11 '16 at 14:28
  • 1
    The same issue is happed with me. Actually, if you put landscape query before the portrait query then it works but then portrait query will not work. So if anyone has this 'issue' solution then please mention here. – Lakshay Kumar Apr 20 '18 at 07:45
  • @LakshayKumar what in [CSS-tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) they have is a general query (without the `orientation` condition), then a portrait query and, finally, the landscape query for all devices. However, this list seems to have a [few other conditions issues as well](https://stackoverflow.com/q/50134230/6225838)... – CPHPython May 02 '18 at 13:31

2 Answers2

0

swapping resolution worked for me, though i only tested in chrome

@media all and (max-width: 768px) and (max-height: 1024px) and (orientation:portrait) {}
@media all and (max-width: 1024px) and (max-height: 768px) and (orientation:landscape) {}
Derrick
  • 3,669
  • 5
  • 35
  • 50
soularcher
  • 21
  • 3
0

There is an issue I've just met with and I think it's the same... When you are checking your app with inspect mobile simulator there is a zoom option on the top bar. If the zooming value is less than 100%, somewhy CSS doesn't see the orientation as landscape and ignores all the CSS of that @media (I think it's a browser problem). Chrome and Opera have that zoom option and on both browsers, you have the same problem (not on Firefox).

So there are 2 options:

  1. Always check your app on 100% zoom level. Or if you think that browsers work correctly in this case...
  2. Don't use "orientation" in your media query, if you are not sure you need it.
cloned
  • 6,346
  • 4
  • 26
  • 38
Vaxo Maisuradze
  • 1