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.

Are you hitting refresh each time? If not, pretty sure you have to make it responsive using javascript — beautifulcoder, Sep 11 '13 at 17:36
I was pretty sure you'd have to use JS to reset the css. Use jquery.resize() to fix css on orientation shift — JTravakh, Sep 11 '13 at 17:37
@beautifulcoder 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. — VVV, Sep 11 '13 at 17:41
I don't believe you have to refresh, try resizing your browser window. — David, Sep 11 '13 at 17:46
@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. — VVV, Sep 11 '13 at 17:49
But it's not fixing your problem, and you don't want to redo your whole responsive layout in JS, right? — David, Sep 11 '13 at 17:57

David · Answer 1 · 2013-09-11T18:12:54.530

4

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.

edited Sep 11 '13 at 18:12

answered Sep 11 '13 at 17:44

David

444
2
9

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? – David Sep 11 '13 at 17:47
Did you leave in the other meta data (`MobileOptimized` as well as the other `viewport` data) or remove it? – David Sep 11 '13 at 17:52
I removed them to test what you gave me. It didn't work, I tried different combinations, still didn't work. – VVV Sep 11 '13 at 17:53
If you go to http://getnimblr.com/ does it work? This is the site where I have it working. I also am using Modernizr from http://modernizr.com/ which could potentially be fixing it for me. – David Sep 11 '13 at 17:56
Seems to be working in your demo (I notice the navigation being centered vs aligned right). I'm also using modernizr... strange – VVV Sep 11 '13 at 18:02
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. – David Sep 11 '13 at 18:04
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. – VVV Sep 11 '13 at 18:09
No problem @vyx.ca I'm glad you solved it, I'll update my answer in case anyone else needs to know – David Sep 11 '13 at 18:10

score 4 · Accepted Answer · edited May 23 '17 at 12:17

4

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

edited May 23 '17 at 12:17

Community

1
1

answered Sep 11 '13 at 18:11

VVV

7,288
3
30
53

had a similar issue, i solved it by adding max-device-x together with the max-x i was using before. cheers – Mr-Programs Oct 19 '18 at 05:03

score 2 · Answer 3 · answered Jan 27 '14 at 14:33

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.

score 2 · Answer 4 · answered Mar 13 '14 at 07:12

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;
    }
}

score 1 · Answer 5 · answered Sep 11 '13 at 17:39

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) { ... }

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. — VVV, Sep 11 '13 at 17:43

Mobile orientation change not applying CSS

5 Answers5

Linked