我刚开始使用“响应式网页设计”转换我的网站。我为 Firefox ( http://chrispederick.com/work/web-developer/ ) 安装了“Web Developer”插件来检查它是否正常工作。一切看起来都很好。
现在我用我的安卓手机尝试了这个。我没有在人像模式下正常工作...... 我将问题归结为对电话中@media-selectors 的错误处理:
此页面 (https://worldtalk.de/m/test.php) 生成一个 CSS，输出浏览器使用的高度/宽度和设备高度/宽度 + 方向作为参数。
我得到了以下结果:
- 肖像，800x1200
- 风景，800x400
方向正确，两个方向的宽度/高度和设备宽度/高度相同。 但该设备 (HTC Desire Z) 只是在纵向模式下使用了错误的屏幕分辨率 (800x1200)。我想避免使用用户代理或类似的设备数据库。
附加信息:
- 浏览器版本:WebKit/533.1
- Android 2.3.3/感知 2.1
- HTC Desire Z(T-Mobile 固件)
- JavaScript 报告相同的屏幕分辨率
问题:
- 这只是我的手机型号还是安卓浏览器的一般行为？
- 如何解决这个问题？
最佳答案
在对该主题进行更多调查后，我找到了以下解决方案。
您需要输入以下 <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
问候，
斯蒂芬
-- 编辑--
当应用上述解决方案时:对于某些设备，使用“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 报告的屏幕分辨率似乎更安全。
-- 编辑--
使用逗号而不是分号来避免有关“视口(viewport)参数值“设备宽度；”的 Chrome 控制台错误对于无法识别的键“宽度”。内容被忽略。'
关于Android 浏览器忽略响应式网页设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12021794/