元宽度=设备宽度在Galaxy Nexus上无法按预期工作



我希望窗口的宽度与物理屏幕的宽度相同。

在我的Galaxy Nexus上,屏幕的宽度是720像素,但窗口的宽度是360。

为什么?怎么了?页面完整代码:

<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8" />
<title>My Page</title> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
windowWidth = $(window).width();
windowHeight = $(window).height();
alert("width: " + windowWidth + " height: " + windowHeight);
});
</script>
</head>
<body id="bo">
</body>
</html>

默认情况下,Android中的WebView会假设您的网页针对的是中密度设备,因此,它会相应地进行扩展。

从文档中(请参阅标题为构建网页以支持不同的屏幕密度的部分):

默认情况下,WebView缩放网页,以便按一定大小绘制与中等密度屏幕上的默认外观相匹配。所以,它在高密度屏幕上应用1.5倍缩放(因为其像素更小)和0.75倍缩放(因为它的像素更大)。从API级ECLAIR开始,WebView支持DOM,CSS和元标记功能,以帮助您(作为网络开发人员)定位具有不同屏幕密度的屏幕。

因此,由于Galaxy Nexus是xhdpi设备,WebView将对您的内容应用2倍的缩放,因此宽度为360。

如果您愿意,您可以更改它,它需要在HTML中添加<meta>标记。例如,将以下内容添加到标记中应该可以获得准确的宽度:

<meta name="viewport" content="target-densitydpi=device-dpi" />

但是,请注意,在这种情况下,您需要将密度考虑在内。

最新更新