Web应用程序中的Android屏幕分辨率不是恒定的答案

【问题标题】：Android screen resolution in web app not constantWeb应用程序中的Android屏幕分辨率不是恒定的
【发布时间】：2011-09-23 01:28:02
【问题描述】：

这很奇怪。我正在使用 javascript 来计算网页中的分辨率。为此，我有以下功能（为此目的进行了一些简化）：

function check() {
    var win = document.defaultView || document.parentWindow,
        ratio = win.devicePixelRatio ? win.devicePixelRatio : 1,
        h = win.innerHeight,
        w = win.innerWidth,
        root = document.documentElement;

    if (!h) {
        h = root.clientHeight;
        w = root.clientWidth;
    }
    alert("height/width/ratio; " + h + "/" + w + "/" + ratio);

}

在 android 设备上似乎有一种非常特殊的行为：

我将以 Nexus S 为例，但显然我已经在许多其他运行不同版本的 Android 设备上验证了这一点。

如果您通过单击电子邮件应用程序（gmail 或 Outlook）中的链接到达包含上述脚本的页面，则警报将产生 1130/800/1.5（高度和宽度太高）。这是一致的。现在，如果您转到地址栏并编辑 url（添加/删除参数或参数值）并点击“Go”，完全相同的代码将产生 452/320/1.5（更像它，这也是一致的)。

究竟是如何以及为什么会发生这种情况的？

编辑：值得注意的是，到目前为止，这似乎只适用于 devicePixelRatio > 1 的设备，即不适用于 v 1.5 / 1.6 上的旧 Android 手机

【问题讨论】：

浏览器缩放是否影响它？
我无法想象，不。页面在这两种情况下看起来都一样，您唯一需要做的就是更改 url 并重新加载，而不是对缩放做任何事情。与此同时，我看不到缩放会如何自行改变。

标签： javascript android screen-resolution

【解决方案1】：

经过大量搜索和调试，这似乎是一个错误。

重现很简单：如果上述脚本在 onload 事件中同步运行，并且您单击打开新窗口、电子邮件应用程序或 target=_blank 网页的内容，则屏幕和窗口的宽度和高度属性都将是错误的。如果您使用 jQuery、YUI 或纯 javascript，则没有区别。

解决方案/解决方法是将 onload 中调用的方法包装在 setTimeout() 中，并将超时设置为 0。这将异步运行该方法并产生正确的结果。

<body onload="setTimeout(check, 0);">

我的朋友们，结束了这个案子。

【讨论】：