1

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

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

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

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

1）在我的华为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”。这很奇怪，我的手机屏幕宽度是 240 像素，而不是 320。

3) 没关系。我阅读了有关自动缩放内容的移动浏览器，以便在一个屏幕上显示更多内容。也许我的移动浏览器缩小了，现在显示区域宽度为 320 像素。所以，我在<body>. 一个宽度为 240 像素，第二个宽度为 320 像素。期望两者都在没有滚动条的移动浏览器中呈现，爬到屏幕上：

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

令我惊讶的是，第一行（240px）爬上了屏幕，第二行（320px）走出了屏幕（80px）并出现了水平滚动条。

所以，长话短说： Javascript 认为有 320px 宽的屏幕可用。CSS 认为有 320px 宽的屏幕可用。但只有 240px 可以放入屏幕。类似的行为显示在我朋友的 iPhone 上。

请指教我，我的赌注在哪里？谢谢你。

PS 测试源代码可以在这里找到：http: //pastebin.com/ULNm4RfW

4

1 回答 1

0

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

您的 css 将从 max-width 变为 min-width 值，就像这样......

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

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

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

于 2013-08-14T12:40:59.260 回答