“Full web” mobile browsers and screen-size media queries based

问题

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?

回答1:

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.

来源：https://stackoverflow.com/questions/11417307/full-web-mobile-browsers-and-screen-size-media-queries-based

标签

iphone

css

media

screen-resolution