Android 浏览器忽略响应式网页设计 [英] Android browser ignores responsive web design
问题描述
我刚刚开始转换具有响应式网页设计"的网站.我为 Firefox 安装了Web Developer"插件( http://chrispederick.com/work/web-developer/ ) 来检查它是否有效.一切看起来都很好.
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.
现在我用我的安卓手机试过了.我在纵向模式下无法正常工作...我将问题归结为电话中对@media-selectors 的错误处理:
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:
此页面(https://worldtalk.de/m/test.php)生成一个 CSS，用于输出浏览器使用的高度/宽度和设备高度/宽度 + 方向作为参数.
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.
我得到了以下结果:
- 肖像，800x1200
- 横向，800x400
方向正确，两个方向的宽度/高度和设备宽度/高度相同.但是该设备 (HTC Desire Z) 只是在纵向模式下使用了错误的屏幕分辨率 (800x1200).我想避免使用带有用户代理或类似内容的设备数据库.
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.
附加信息:
- 浏览器版本:WebKit/533.1
- Android 2.3.3/Sense 2.1
- HTC Desire Z(T-Mobile 固件)
- JavaScript 报告相同的屏幕分辨率
- 这只是我的手机型号还是安卓浏览器的一般行为?
- 如何解决这个问题?
推荐答案
在对该主题进行更多调查后，我找到了以下解决方案.您需要放入以下 -Tags 以告诉浏览器禁用缩放.然后 CSS @media 选择器按预期工作.
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 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 报告的屏幕尺寸是正确的.对于高分辨率的小屏幕，可以使用以下方法实现正确的物理像素"分辨率:
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:
<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 报告的屏幕分辨率似乎更安全.
However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.
-- 编辑--
使用逗号而不是分号来避免 Chrome 控制台关于Viewport 参数值"device-width; 的错误对于无法识别的键宽度".内容被忽略.'
Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value "device-width;" for key "width" not recognized. Content ignored.'
这篇关于Android 浏览器忽略响应式网页设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
