Question

我被要求使用移动布局改造现有网站。该网站建立在Wordpress Twenty11框架上，因此我决定使用该框架中的现有媒体查询构建移动布局。

现在，我的移动布局在任何拖动到低于420px宽的桌面浏览器上看起来都很棒，但在iPhone和iPad上Android移动浏览器无论如何只是加载全角网页。完整的网络体验，woot！

客户不满意。希望移动设计能够在所有iPhone浏览器上显示。所以现在我需要弄清楚为什么移动浏览器坚持以完整的桌面宽度显示页面，完全忽略移动CSS。

这是我的媒体查询，位于主要style.css文档的底部：

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

当我手动调整桌面计算机上的浏览器窗口大小时，所有这些都能满足我的需求。当我在下一个无用的基于iFrame的“iPhone模拟器”中测试它们时，它们也可以做我想要的。但到目前为止，所有移动设备都经过严格的测试，显示全宽度布局，缩放范围非常广泛且无法读取。

我是否应该添加一些媒体查询以使移动浏览器显示移动CSS？或者我应该完全采用不同的策略，例如用户代理检测或类似的？

已编辑添加：像header.php中的这一行，我猜：

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

实际上应该是

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

正确？

Answer 1

您应该在媒体查询中添加min-width个参数，因为此时屏幕较小的人会从所有三个媒体查询中获取规则，因为它的最大宽度将小于800px。

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

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

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

如果您尝试使用媒体查询过于复杂，则会遇到大量问题。不同的浏览器以不同的方式处理它们，使它们不太适合生产环境。

我喜欢使用的方法是为window.resize事件创建一个简单的JS事件处理程序，它只向<html>元素添加一个类，以指定用户所使用的屏幕断点。在。然后在你的CSS中，你只需要使用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');
    }
});

抱歉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和其他浏览器。

“完整网络”移动浏览器和基于屏幕大小的媒体查询

1 个答案: