meta视口在Android手机上正常工作？

Question

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

我发现解决方法是使用Meta Viewport标记停止缩放...

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

起初这似乎有效，因为它正在触发正确的媒体查询。这款手机的水平分辨率为480px，可以触发我的（320px-480px）媒体查询。

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

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

计算得出的是369px，我觉得这很奇怪。然后我用媒体查询检查了它，其中min和max设置为369px并且它被触发（至少匹配）。那么为什么浏览器认为当原始分辨率是480px时它是369px？

真的很感激任何帮助。

乔恩

Answer 1

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