vyx.ca vyx.ca - 1 month ago 7
CSS Question

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.

Answer

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