Question

我在@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总是显示：最大宽度800，无论方向如何。

更新：我发现this page演示了几种检测宽度的javascript方法。 window.outerWidth似乎适用于Android。它在设备和浏览器中通常是否可靠？我意识到我将不得不放弃@media查询来使用它。

Answer 1

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

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

此代码的像素范围为480（最小）到599（最大）。应该工作。

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

android @media查询宽度问题

1 个答案: