我刚开始转换为响应式网页设计我的网站。我安装了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.

现在我想这与我的Andr​​oid手机。我没有正确使用肖像模式工作... 我跟踪这个问题到错误的处理@媒体选择的电话：

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.

我得到了以下结果：

的取向是正确的，宽度/高度和器件的宽度/高度是相同的两个方向。 但该设备（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.

补充说明：

推荐答案

在有关该主题的一些调查，我发现下面的解决方案。 你需要把下面的＆LT;元＆GT; 标签都有效，告诉浏览器禁用缩放。然后，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">

请参阅： I＆QUOT如何;禁用＆QUOT;缩放移动网页上？ 而且： http://garrows.com/?p=337 （编辑：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

问候，

斯特凡

- 编辑 -

在应用上面的解决方案：对于某些设备使用规模= 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/