2

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

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

1 回答 1

2

默认情况下，WebViewAndroid 中的 将假定您的网页针对的是中等密度设备，因此，它会相应地进行缩放。

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

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

因此，由于 Galaxy Nexus 是一个xhdpi设备，WebView它将对您的内容应用 2 倍缩放，从而产生 360 的宽度。

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

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

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

于 2012-12-12T21:33:44.340 回答