I'm testing a website I'm developing and am using media queries.
When I test and resize the page in a browser, everything is good.
But when I test on my mobile device, I encounter a problem when I change the orientation of the phone.
If I load the page in landscape
mode, the correct CSS are applied.
When I change to portrait
, the CSS are also correct.
But if I go back to landscape
, the portrait
css classes are still being applied.
I'm using these metatags
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
And in my media queries I have
@media
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }
@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }
I've alerted the device width to make sure it's ok and in landscape
mode it's 598px
wide and portrait
is 384px
I'm using a Nexus 4 (Android 4.3)
How come the CSS aren't applied once I change back the orientation?
EDIT:
If I load the site in portrait
and then change to landscape
, the CSS aren't applied.
It's as if once it goes to the smallest resolution, it can't go back.
On my Nexus 4, I have something that looks like this and seems to work for your test cases:
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>
And I make no reference to orientation in the media query, for example:
@media only screen and (max-width: 610px) { /* Some CSS here */ }
EDIT: Looks like you have to put max-device-width after the other max-width stuff in terms of the media queries. To quote vyx.ca in the comments below...
Just found my problem. Notice how I define 'max-device-width' before the rest. If I put that condition last, it works. 'max-device-width' is used for retina display.