Android 浏览器忽略响应式网页设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12021794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Android browser ignores responsive web design
提问by SDwarfs
I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/) to check, if it's working. Everything looked fine.
我刚刚开始转换我的网站，使其具有“响应式网页设计”。我为 Firefox ( http://chrispederick.com/work/web-developer/)安装了“Web Developer”插件来检查它是否正常工作。一切看起来都很好。
Now I tried this with my android phone. I didn't work correctly for portrait mode... I tracked the problem down to wrong handling of the @media-selectors at the phone:
现在我用我的安卓手机试过了。我没有在纵向模式下正常工作......我将问题归结为电话上@media-selectors的错误处理：
This page ( https://worldtalk.de/m/test.php) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.
此页面 ( https://worldtalk.de/m/test.php) 生成一个 CSS，该 CSS 输出浏览器用作参数的高度/宽度和设备高度/宽度 + 方向。
I got the following results:
我得到了以下结果：
- portrait, 800x1200
- landscape, 800x400
- 肖像，800x1200
- 风景，800x400
The orientation was correct, the width/height and device-width/height were the same for both orientations. But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.
方向正确，两个方向的宽度/高度和设备宽度/高度相同。但是该设备 (HTC Desire Z) 只是在纵向模式下使用了错误的屏幕分辨率 (800x1200)。我想避免使用带有用户代理或类似内容的设备数据库。
Additional Information:
附加信息：
- Browser-Version: WebKit/533.1
- Android 2.3.3 / Sense 2.1
- HTC Desire Z (T-Mobile firmware)
- JavaScript reports identical screen resolution
- 浏览器版本：WebKit/533.1
- 安卓 2.3.3 / Sense 2.1
- HTC Desire Z（T-Mobile 固件）
- JavaScript 报告相同的屏幕分辨率
Questions:
问题：
- Is this only my phone model or a general behavior of the android browser?
- How to fix this?
- 这只是我的手机型号还是 android 浏览器的一般行为？
- 如何解决这个问题？
回答by SDwarfs
After some more investigation on that topic I found the following solution.
You need to put in the following <meta>-Tags to tell the browser to disable the scaling. Then the CSS @media selectors are working as expected.
在对该主题进行了更多调查后，我找到了以下解决方案。您需要输入以下<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">
See: How can I "disable" zoom on a mobile web page?And: http://garrows.com/?p=337(EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-function
请参阅：如何在移动网页上“禁用”缩放？和：http://garrows.com/? p= 337（编辑：http: //garrows.com/blog/disable-mobile-browser-zoom-function
Regards,
问候，
Stefan
斯特凡
-- edit --
- 编辑 -
When applying the above solution: For some devices the device-resolution reported when using "scale=1.0" is lower than the physical screen resolution and you'll possibly have effects like blurred pictures. This is caused by the higher dpi (dots per inch) of the screen. The screen size reported in JavaScript is however correct. For small screens with high resolution the correct "physical pixel" resolution can be achieved by using:
应用上述解决方案时：对于某些设备，使用“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">
However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.
但是，这会导致 dpi 值较低的屏幕出现问题。使用 JavaScript 报告的屏幕分辨率似乎更安全。
-- edit --
- 编辑 -
Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value “device-width;” for key “width” not recognized. Content ignored.'
使用逗号而不是分号来避免 Chrome 控制台关于“Viewport 参数值”device-width; 的错误 对于无法识别的键“宽度”。内容被忽略。
