我刚刚开始使用“响应式网页设计”转换我的网站。我安装了Firefox的“Web Developer”插件（http://chrispederick.com/work/web-developer/）来检查它是否正常工作。一切都很好。
现在我用我的Android手机尝试了这个。我的肖像模式无法正常工作...... 我在手机上跟踪问题的错误处理是@ media-selectors：
此页面（https://worldtalk.de/m/test.php）生成一个CSS，输出浏览器使用的高度/宽度和设备高度/宽度+方向作为参数。
我得到了以下结果：
方向正确，两个方向的宽度/高度和设备宽度/高度相同。 但该设备（HTC Desire Z）仅使用错误的屏幕分辨率（800x1200）进行纵向模式。我想避免使用带有用户代理的设备数据库或类似的东西。
其他信息：
答案 0 :(得分：44)
经过对该主题的更多调查后，我找到了以下解决方案。
您需要输入以下<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">
请参阅：How can I "disable" zoom on a mobile web page? 并且：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控制台有关“视口参数值”设备宽度的错误;“键”宽度“无法识别。内容被忽略。'