All geek questions in one place

"Full web browsers" and multimedia requests on the screen.

I was asked to update an existing website using a mobile layout. The website was created based on Wordpress Twenty11, so I decided to create a mobile layout using the existing media queries in this structure.

Now my mobile layout looks great on any desktop browser that will be less than 420 pixels wide, but on iPhone and Android mobile browsers it just loads a full-width web page. Full web experience, woot!

The customer is unhappy. Want your mobile design to display on all iPhone browsers. So, now I need to find out why mobile browsers insist on showing the page to the full width of the desktop, completely ignoring mobile CSS.

Here are my media queries, at 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 this does what I want when I manually resize the browser window on the desktop computer. They also do what I want when I test them on the "useless" iFrame iPhone emulators. But all the mobile devices that have been tested so far stubbornly demonstrate a full-size layout, are very scalable and unreadable.

Is there anything I need to add to these media queries to make mobile browsers display mobile CSS? Or should I go with a completely different strategy, such as user agent discovery or the like?

EDIT ADD: Something like this line in header.php, I assume:

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

should be

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

right?

+3
1

min-width -, - -, 800 .

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

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

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

, . -, .

, , JS window.resize, <html>, , . CSS :

$(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');
    }
});

jQuery, , .

CSS :

#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*/
}

, , JS , , IE6/5.5 .

+2

Source: https://habr.com/ru/post/1523374/

More articles:


All Articles