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

Question

我刚开始转换我的网站有'响应式网页设计'.我安装了Firefox的"Web Developer"插件(http://chrispederick.com/work/web-developer/)来检查它是否正常工作.一切都很好看.

现在我用我的Android手机尝试了这个.我在纵向模式下无法正常工作......我在手机上跟踪了@ media-selectors处理错误的问题:

此页面(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浏览器的一般行为？
• 如何解决这个问题？

Answer 1

经过对该主题的更多调查后,我找到了以下解决方案.您需要输入以下<meta>-Tags来告诉浏览器禁用缩放.然后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

问候,

斯特凡

- 编辑 -

应用上述解决方案时:对于某些设备,使用"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控制台有关"视口参数值"设备宽度的错误;"对于"键"宽度"无法识别.内容被忽略了."

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