3

I've been asked to retrofit an existing website with a mobile layout. The website was built on a Wordpress Twenty11 framework, so I decided to build the mobile layout using the existing media queries in that framework.

Now, my mobile layout looks great on any desktop browser dragged down to be less than 420px wide, but on iPhone & Android mobile browsers it just loads the full-width webpage anyhow. Full web experience, woot!

Client unhappy. Wants mobile design to show up on all iPhone browsers. So now I need to work out why the mobile browsers insist on showing the page at the full desktop width, ignoring the mobile CSS entirely.

Here's my media queries, down the bottom of the main style.css document: 

@media (max-width: 800px) {
/* Design starts to get a little more fluid */
}

@media (max-width: 650px) {
/* Design gets quite a lot more fluid, and columns start dropping off the edge to below     main content */
}

@media (max-width: 450px) {
/* Totally changed navigation for small viewports, main content takes up whole viewport */
}

All of these do what I want when I manually resize a browser window on a desktop machine. They also do what I want when I test them in next-to-useless iFrame-based "iPhone emulators". But all mobile devices so far tested stubbornly show the full-width layout, zoomed really far out and unreadable.

Is there something I should be adding to those media queries to MAKE the mobile browsers display the mobile CSS? Or should I be going with a different strategy altogether, such as user-agent detection or similar?

EDITED TO ADD: Something like this line in header.php, I am guessing:

<meta name="viewport" content="width=960,
                           maximum-scale=1.0">

should in fact be 

<meta name="viewport" content="width=device-width,
                           maximum-scale=1.0">

right?

Ila
  • 3,528
  • 8
  • 48
  • 76

1 Answers1

2

You should add min-width parameters to your media queries because at the moment someone with a small screen will be getting rules from all three of your media queries since it's max width will be less than 800px.

@media (min-width: 651px AND max-width: 800px) {
    ...
}

@media (min-width: 451px AND max-width: 650px) {
    ...
}

@media (max-width: 450px) {
    ...
}

If you attempt to get too complex with media queries you'll run into tons of problems. Different browsers handle them differently making them less than ideal for a production environment.

A method that I like to use is to create a simple JS event handler for the window.resize event that only adds a class to the <html> element to specify what screen-break-point the user is at. Then in your CSS you just prefix rules with the breakpoint-classes:

$(window).on('resize', function () {
    var w = $(this).width();
    if (w > 1400) {
        $('html').addClass('widescreen-viewport');
    } else if (w > 1024) {
        $('html').addClass('desktop-viewport');
    } else if (w > 767) {
        $('html').addClass('tablet-viewport');
    } else {
        $('html').addClass('mobile-viewport');
    }
});

Sorry for the jQuery but this is a way I know works for sure.

Then your CSS would be something like:

#some-element {
    /*default styles*/
}
.widescreen-viewport #some-element {
    /*widescreen styles*/
}
.desktop-viewport #some-element {
    /*desktop styles*/
}
.tablet-viewport #some-element {
    /*tablet styles*/
}
.mobile-viewport #some-element {
    /*mobile styles*/
}

This method will receive better browser support as it requires JS to be enabled but other than that, it'll work back to IE6/5.5 and other browsers from that time.

Jasper
  • 75,717
  • 14
  • 151
  • 146
  • I think that's what I want- for example: at 800px, make left-column float:none. At 600px, keep left-column float:none, and make left-column padding:0. At 400px, keep float:none and padding:0, and make font-size:11px; and so on. So each smaller screen size should be keeping the styles above, and adding/overwriting as appropriate. – Ila Jul 10 '12 at 16:26
  • CSS makes that tricky because each time you add a class/rule to an element, it must be more unique than the last one or it won't overwrite the old style. – Jasper Jul 10 '12 at 16:30
  • Yes, but I've gotten all of the styles I want to work correctly when a desktop browser window is resized down to <420px- the problem is that mobile browsers are still reverting to the full-width-zoom layout. Changing viewport width to device-width hasn't fixed it, either. Will try JS as a last resort! – Ila Jul 10 '12 at 19:00
  • I can't find the article but browsers handle multiple media queries differently. For instance, some browsers will download images specified in all media query rules even if only one of them applies. I noticed in my own research that if you want to use multiple break-points that the CSS rule declarations inside the media queries have to get complex so the correct rule will actually be overwritten. I hope that makes sense... My suggestion is to use the JS version I supplied; it's very performant, very well supported, at least as easy and maybe easier to maintain, and nowhere near as buggy. – Jasper Jul 10 '12 at 20:22
  • "... it must be more unique than the last one or it won't overwrite the old style" It must be **more specific** than the last one(s), which includes having the same specificity *and* coming after previous queries. Add your mobile media queries after your others, and follow the same specificity conventions as your other CSS and it will work fine. – Bruce Alderson Jun 14 '13 at 21:45