Android 浏览器忽略响应式网页设计

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

现在我用我的安卓手机尝试了这个。我在纵向模式下无法正常工作... 我将问题归结为手机上 @media-selectors 的错误处理：

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

我得到以下结果：

• 肖像，800x1200
• 风景，800x400

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

附加信息：

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

问题：

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

经过对该主题的更多调查后，我找到了以下解决方案。 您需要输入以下内容<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">

See: 如何“禁用”移动网页上的缩放？ https://stackoverflow.com/questions/4472891/how-can-i-disable-zoom-on-a-mobile-web-page And: http://garrows.com/?p=337 http://garrows.com/?p=337（编辑：http://garrows.com/blog/disable-mobile-browser-zoom-function http://garrows.com/blog/disable-mobile-browser-zoom-function

Regards,

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;”的错误无法识别键“宽度”。内容被忽略。”

http://royaltutorials.com/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/