3

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

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

客户不满意。希望移动设计出现在所有 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">

正确的？

4

1 回答 1

2

您应该将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 和其他浏览器。

于 2012-07-10T16:21:50.040 回答