Android浏览器忽略响应式网页设计 [英] Android browser ignores responsive web design

问题描述

我刚刚开始转换我的网站有响应网页设计。我安装了Firefox的Web开发人员插件（ 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移动固件）


• JavaScript报告相同的屏幕分辨率

• Browser-Version: WebKit/533.1
• Android 2.3.3 / Sense 2.1
• HTC Desire Z (T-Mobile firmware)
• JavaScript reports identical screen resolution

• 这只是我的手机型号或Android浏览器的一般行为吗？


• 如何解决这个问题？

推荐答案

经过一些更多的调查后，我发现了以下解决方案。
您需要放入以下< meta> -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（EDIT： http://garrows.com/blog/disable-mobile-browser-zoom-function

See: How can I "disable" zoom on a mobile web page? And: http://garrows.com/?p=337 ( http://garrows.com/blog/disable-mobile-browser-zoom-function

回复，

Stefan

- edit -

-- edit --

应用上述解决方案时：对于某些设备，使用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控制台错误视口参数值设备宽度无法识别键宽度。已忽略内容。

Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value "device-width;" for key "width" not recognized. Content ignored.'

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

这篇关于Android浏览器忽略响应式网页设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！