安卓浏览器无视响应式网页设计

Question

我刚开始将我的网站转换为“响应式Web设计”。我安装了Firefox的“Web Developer”插件（http://chrispederick.com/work/web-developer/）进行检查，一切看起来都很好。

但是当我用我的Android手机尝试时，竖屏模式下并没有正常工作。我追踪问题到在手机上错误处理@media选择器：

此页面（https://worldtalk.de/m/test.php）生成一个CSS，输出浏览器使用的高度/宽度和设备高度/宽度+方向作为参数。

我得到以下结果：

• 竖屏，800x1200
• 横屏，800x400

方向是正确的，对于两种方向，宽度/高度和设备宽度/高度相同。但是设备（HTC Desire Z）在竖屏模式下使用错误的屏幕分辨率（800x1200）。我想避免使用包含用户代理或类似内容的设备数据库。

附加信息：

• 浏览器版本：WebKit / 533.1
• Android 2.3.3 / Sense 2.1
• HTC Desire Z（T-Mobile固件）
• JavaScript报告相同的屏幕分辨率

问题：

• 这只是我的手机型号还是Android浏览器的一般行为？
• 如何解决这个问题？

- SDwarfs

---

是的，我做了...解决方案现在已经作为答案发布在下面。 - SDwarfs

Answer 1

经过更深入的调查，我找到了以下解决方案。您需要添加以下 <meta> 标签来告诉浏览器禁用缩放功能。然后 CSS 的 @media 选择器就能按预期工作了。

<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">

参见：如何“禁用”移动网页上的缩放？ 以及：http://garrows.com/?p=337 （编辑：http://garrows.com/blog/disable-mobile-browser-zoom-function）

此致，

Stefan

-- 编辑 --

当应用以上解决方案时：对于一些设备，在使用“scale=1.0”时报告的设备分辨率比物理屏幕分辨率低，可能会出现模糊图片等效果。这是由于屏幕的更高dpi（每英寸点数）造成的。然而，在JavaScript中报告的屏幕尺寸是正确的。对于具有高分辨率小屏幕的情况，可以通过使用以下方法获得正确的“物理像素”分辨率：

<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">

然而，在dpi值较低的屏幕上使用这种方法可能会出现问题。似乎更安全的做法是使用JavaScript报告的屏幕分辨率。

-- 编辑 --

为了避免Chrome控制台错误，使用逗号代替分号，“Viewport argument value “device-width;” for key “width” not recognized. Content ignored.”。

http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/

- SDwarfs

---

谢谢！这让我疯了好几天。 - tahdhaze09