Mobile orientation change not applying CSS

VVV picture VVV · Sep 11, 2013 · Viewed 24.3k times · Source

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.

Answer

David picture David · Sep 11, 2013

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.