vyx.ca vyx.ca - 10 months ago 41
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 Source

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