Search code examples
cssmedia-queriesdevice-orientation

Mobile orientation change not applying CSS

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.

Solution

  • My problem is related to the order of my CSS requests.

    I used to define 'min-device-width' before the rest.

    @media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

    But if I define it last, it works.

    @media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }

    For more information about device-width:- check out this question