经过更深入的调查,我找到了以下解决方案。您需要添加以下
<meta>
标签来告诉浏览器禁用缩放功能。然后 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)
此致,
Stefan
-- 编辑 --
当应用以上解决方案时:对于一些设备,在使用“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控制台错误,使用逗号代替分号,“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/