Question

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

在我的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>

Answer 1

默认情况下，Android中的WebView会假设您的网页定位于中等密度设备，因此会相应地扩展内容。

来自documentation（请参阅标题为构建网页以支持不同屏幕密度的部分）：

默认情况下，WebView会对网页进行缩放，以便按大小绘制与中密度屏幕上的默认外观匹配。所以在高密度屏幕上应用1.5倍缩放（因为它的像素是在低密度屏幕上缩小和0.75倍缩放（因为它的像素更大）。从API级ECLAIR开始，WebView支持DOM， CSS和元标记功能可以帮助您（作为Web开发人员）的目标具有不同屏幕密度的屏幕。

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

如果您愿意，可以更改此设置，它需要在HTML中添加<meta>标记。例如，将以下内容添加到标记中应该会产生准确的宽度：

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

但请注意，在这种情况下，您需要考虑密度。

Meta width =设备宽度不能按预期在Galaxy Nexus上运行

1 个答案: