android - css max-device-width 800 与安卓手机不匹配

Question

我正在制作一个网站，它在移动设备上的外观应该与在台式机上的外观不同。如果相关的话，我正在 nexus-s - android 2.3 上测试它。我已将 viewport 元标记设置为 device-width。

在 CSS 中，我添加了一个 @media all and (max-device-width: 800px) 规则，它具有所有移动设备特定的样式。但这些都没有被应用。我已将其全部制作成 !important 并将其作为 css 文件中的最后一个 block 放入，但它仍然无法正常工作。

有人遇到过这样的事情吗？

Answer 1

我有一个 mobile screen width用于检查移动设备上各种屏幕分辨率的测试页面。在我的 HTC Desire 上，如果我在视口(viewport)元中指定 0.67 的 initial-scale，则宽度规则匹配 800px。

如果我将 width 设置为 device-width 并且 initial-scale 为 1.0，屏幕在 CSS 规则中显示为 533 像素。

在您的手机上查看它，看看它是否对您的页面有帮助。