Meta width=device-width 在 Galaxy Nexus 上无法正常工作答案

【问题标题】：Meta width=device-width doesn't work on Galaxy Nexus as expectedMeta width=device-width 在 Galaxy Nexus 上无法正常工作
【发布时间】：2012-11-30 16:38:42
【问题描述】：

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

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

【问题讨论】：

取决于屏幕密度，developer.android.com/guide/practices/screens_support.html

标签： android web-applications webview

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：

谢谢。有用。您能说一下，如何在我的脚本中检测屏幕的密度吗？
您可以使用window.devicePixelRatio。请注意，在桌面浏览器上，该变量将不可用。