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

【问题标题】：css max-device-width 800 not matching for android phonecss max-device-width 800 与安卓手机不匹配
【发布时间】：2011-04-27 14:15:24
【问题描述】：

我正在制作的网站在手机上看起来应该与在桌面上看起来不同。如果相关，我正在nexus-s - android 2.3上对其进行测试。我已将viewport 元标记设置为device-width。

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

有人遇到过这种情况吗？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

酷。该页面对于检查不同的设置非常有用。但令人讨厌的是，您必须设置此初始比例。另外为什么在第一个链接上将宽度设置为 1440？
手机的 dpi 很高，所以他们缩放它以使视口更大，用户可以平移。宽度是 1440，因为这是页面上最宽元素的宽度。 android 浏览器中还有一个可能的错误，导致显示宽度与最宽的元素一样宽。页面中有一条注释掉的border-bottom 规则说明了这一点。

【解决方案2】：

你把这个放在标题里了吗：

<meta name="viewport" content="width=device-width"/>

【讨论】：