Mobile orientation change not applying CSS

Question

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.

Secrecy

Are you hitting refresh each time? If not, pretty sure you have to make it responsive using javascript – Archespore

I was pretty sure you'd have to use JS to reset the css. Use jquery.resize() to fix css on orientation shift – Labefaction

@Archespore No I'm not hitting refresh, when I hit refresh, the css appears fine... it's when I change orientation once the page is loaded. – Secrecy

I don't believe you have to refresh, try resizing your browser window. – Jubbah

@David, on jquery.resize(), I alerted $(window).width() and I get the correct new width to the resize() is getting trigger when I change orientation. – Secrecy

But it's not fixing your problem, and you don't want to redo your whole responsive layout in JS, right? – Jubbah

Answer 1

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

Secrecy

had a similar issue, i solved it by adding max-device-x together with the max-x i was using before. cheers – Elwoodelwyn

Answer 2

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.

Jubbah

Is your procedure to get the bug as follows: 1. Have phone in landscape mode, 2. press refresh to load the page, 3. Turn phone portrait, 4. Turn phone landscape, 5. Bug appears. Am I correct? – Jubbah

Did you leave in the other meta data (MobileOptimized as well as the other viewport data) or remove it? – Jubbah

I removed them to test what you gave me. It didn't work, I tried different combinations, still didn't work. – Secrecy

If you go to getnimblr.com does it work? This is the site where I have it working. I also am using Modernizr from modernizr.com which could potentially be fixing it for me. – Jubbah

Seems to be working in your demo (I notice the navigation being centered vs aligned right). I'm also using modernizr... strange – Secrecy

Might be time to take a look at the rest of your code and commenting stuff out - especially if you have a lot of media queries. – Jubbah

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. – Secrecy

No problem @vyx.ca I'm glad you solved it, I'll update my answer in case anyone else needs to know – Jubbah

Answer 3

Well-known quiksmode site defines device-width / device-height media features as static.

These media queries are static once determined; i.e. they do not update the value they’re checked against when the device orientation is changed. (So if you start in portrait and then switch to landscape, the portrait device-width still counts. Reloading the page solves this.)

That's why using max-device-width is still applied after changing orientation.

Samaveda

Answer 4

this code worked for me:-

  @media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
    body
    {
        background:#009;
    }
}

@media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
    body
    {
        background:#993;
    }
}

Tremayne

Answer 5

Your media queries have overlap. Max-width of 520 will also be true of max-width 610. Also you have an OR in the landscape so it's possible to be true in Portrait if max-width 610 is true. Overlapping media queries will work like CSS in that it cascades so you'll get odd behavior.

I don't see any reference to orientation:portrait in your queries so how do you know portrait classes are being applied. You typically want to make it an either or when doing orientation queries.

Also try adding min-width to remove any width overlap

@media only screen and (orientation:landscape) { ... }

@media only screen and (orientation:portrait) { ... }

Harar

Thanks. I know about the overlapping, and in this case it's ok. But the thing is my device with is 598 (Nexus 4) so the classes of max-width 520 shouldn't be applied. – Secrecy