0

我读了一篇关于@media 查询的好文章，现在我正在尝试使用它们根据浏览器宽度来格式化我的网站。当我在我的 Android 手机（Android 4.0 浏览器）上进行测试时，当实际宽度为 480 时，它似乎给出了 800 像素的宽度。如果手机横向旋转，宽度将是 800。在 CSS 中检测当前宽度的正确方法是什么？

The CSS I used for testing:

@media all and (max-width: 800px) {
    div.testit800 {
    display: block;
    }
}

@media all and (max-width: 799px) {
    div.testit799 {
    display: block;
    }
}

@media all and (max-width: 768px) {
    div.testit768 {
    display: block;
    }
}

的HTML：

<div class="testit800">
    max width 800
</div>
<div class="testit799">
    max width 799
</div>
<div class="testit768">
    max width 768
</div>

Android 总是显示：max width 800 无论方向如何。

更新：我发现这个页面演示了几种检测宽度的 JavaScript 方法。window.outerWidth 似乎适用于 Android。它在设备和浏览器中是否普遍可靠？我意识到我必须放弃 @media 查询才能使用它。

4

1 回答 1

0

我猜你的做法是正确的，但是正如你的代码所示，你没有任何宽度为 480px 的@media。

@media all and (min-width: 480px) and (max-width: 599px)
{
}

此代码将采用从 480（最小）到 599（最大）的像素范围。应该管用。

我的建议是始终使用百分比而不是 px，因为百分比将固定到屏幕大小并且像素是固定的。

于 2013-08-19T19:16:17.820 回答