Question

我对这个问题真的很无奈，请指教。

我想要为移动设备优化网页（使用CSS媒体查询）。在<head>，我有这个：

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

但在测试媒体查询时会出现一些问题：

1）在我的Huawei Ideos X1上进行测试，显示宽度为240px。所以，CSS应该是这样的：

@media (max-width: 240px) {
    body: { background-color: red; }
}

但它什么都不做。

2）“哪里可能有问题？”我说。所以，我给javascript显示屏幕分辨率到<body>：

<div>
    <script>
    document.write(screen.width + 'x' + screen.height);
    </script>
</div>

但它显示“320x425”。这很奇怪，我的手机屏幕宽度为240px，而不是320.

3）无所谓。我读到了移动浏览器，它可以自动缩放内容，以便在一个屏幕上显示更多内容。也许我的移动浏览器缩小了，现在显示区域宽度为320像素。所以，我在<body>添加两行。一个宽240px，第二宽320px。期望两者都在没有滚动条的移动浏览器中渲染，爬到屏幕上：

<hr style="width: 240px;">
<hr style="width: 320px;">

令我惊讶的是，屏幕上升了第一行（240px），第二行（320px）离开了屏幕（80px），出现了水平的scroolbar。

所以，简而言之： Javascript认为可以使用320px宽屏幕。 CSS认为可以使用320px宽屏幕。但只有240px才能适应屏幕。类似的行为在我的朋友iPhone上显示。

请告诉我，我的mystake在哪里？谢谢。

P.S。可以在那里找到测试源代码：http://pastebin.com/ULNm4RfW

Answer 1

如果您使用移动优先方法设计，我认为您的一个问题可以解决。这意味着设计最小的屏幕尺寸（移动）然后再向上移动。

你的css会从最大宽度变为最小宽度值，就像这样......

@media screen and (min-width: 240px) {
    CSS: here;
}

因此，您在开始时设置的所有基本样式都适用于较小的屏幕尺寸，上面的规则将设置从任何240px或更高的屏幕尺寸开始的样式。

这也将消除使用任何JavaScript的需要，您应该尽量避免在浏览器嗅探屏幕尺寸时使用这些JavaScript。