2

在 Android Chrome 上，当打开新选项卡并导航到 URL 时，或者当您放大页面然后导航到新 URL 时，window.outerWidth 和偶尔 (document.documentElement.clientWidth) 并不总是具有准确的值. 最多 3 秒后，他们获得准确的值。是否有来自窗口或 DOM 的相应事件我可以监听以检测这一刻，还是我必须依赖循环？

这是问题的演示：http: //betterstatistics.org/tests/load.html 我只在 Android Chrome 上看到过这个，也许这是一个错误？

这是出现行为时我从该页面获得的输出。请注意，window.outerWidth (OW) 在 1100 毫秒之前等于 0：

body onload()
-0ms CW: 980 IW: 980 OW: 0
-100ms CW: 980 IW: 980 OW: 0
-200ms CW: 980 IW: 980 OW: 0
-300ms CW: 980 IW: 980 OW: 0
-400ms CW: 980 IW: 980 OW: 0
-500ms CW: 980 IW: 980 OW: 0
-600ms CW: 980 IW: 980 OW: 0
-700ms CW: 980 IW: 980 OW: 0
-800ms CW: 980 IW: 980 OW: 0
-900ms CW: 980 IW: 980 OW: 0
-1000ms CW: 980 IW: 980 OW: 0
-1100ms CW: 980 IW: 980 OW: 384
-1200ms CW: 980 IW: 980 OW: 384
-1300ms CW: 980 IW: 980 OW: 384

这是测试页面的 HTML：

<html>
<head>
<script>
  var count = 0;
  var interval = 100;
  function init(){
    log("body onload()");
    outputStats();
  }
  function outputStats() {
    log("-" + (count * interval) + "ms  CW: " + 
    document.documentElement.clientWidth+"  IW: "+window.innerWidth+"  OW: " +window.outerWidth);
    count++
    if(count < 50){
      setTimeout(outputStats, interval);
    }
  }
  function log(t){
    var logDiv = document.getElementById("content");
    var tDiv = document.createElement("div");
    tDiv.appendChild(document.createTextNode(t));
    logDiv.appendChild(tDiv);
  }
</script>
</head>
<body onload="init();" style="font-family:sans-serif;">
  <div id="content">
    Using Android Chrome: open this page in a new tab, or go to another web page then scale it up, and navigate to this page. The window.outerWidth does not show the correct value for up to a few seconds.<br/>
    <br/>
    CW: document.documentElement.clientWidth<br/>
    IW: window.innerWidth<br/>
    OW: window.outerWidth<br/>
    <br/>
  </div>
</body>
</html>
4

0 回答 0