android - 元视口(viewport)在 Android 手机上正常工作？

Question

我在 Desire HD 上使用媒体查询时遇到了各种各样的问题，因为 Android 浏览器会自动以更高分辨率呈现页面并将其缩小。基本上它认为它的屏幕宽度比实际宽度要宽得多。

我发现解决这个问题的方法是使用 Meta Viewport 标签停止缩放...

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

起初这似乎奏效了，因为它触发了正确的媒体查询。手机的水平分辨率为 480 像素，它触发了我的 (320px-480px) 媒体查询。

然后我使用一些 javascript 将计算的视口(viewport)输出到屏幕...

var windowWidth = $(window).width();
$('div.windowWidthLabel').text("Window Width: " + windowWidth + "px");

计算出来的是369px，我觉得很奇怪。然后我用最小和最大设置为 369px 的媒体查询检查它并触发(至少匹配)。那么，为什么浏览器认为它是 369px，而 native 分辨率是 480px？

我们将不胜感激任何帮助。

乔恩

Answer 1

没有找到确切的答案，但我发现最好不要在媒体查询方面使用设备的确切结果，只需调整媒体查询直到内容看起来正确:)