DOM 窗口尺寸何时最终确定？答案

【问题标题】：When are DOM window dimensions finalized?DOM 窗口尺寸何时最终确定？
【发布时间】：2023-03-21 01:23:01
【问题描述】：

我在使用window.innerWidth 和window.innerHeight 的网络应用程序似乎已经稳定之前遇到了问题。在我的桌面上一切正常，但我在多个移动设备上遇到了这个问题（所有设备都运行当前稳定版本的 Chrome for Android）。我已将事情简化为我认为重现问题的最简单方法：

<!DOCTYPE html>
<html>
  <head>
    <!--meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /-->
    <!--meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /-->
    <script type="text/javascript">
      function dimen() {
        alert("" + window.innerWidth + "x" + window.innerHeight);
      }

      window.onload = dimen;

      setTimeout(dimen, 1000);
    </script>
  </head>
  <body>
  </body>
</html>

在我的 Nexus 7 上，我得到以下结果：

没有视口元标记：

初始加载：

980x1449（通常）
980x1292（有时）

刷新：

980x1292

暂停一秒：

980x1292

带有第一个视口元标记：

初始加载：

980x1449（通常）
980x1292（有时）

刷新：

600x791

暂停一秒：

600x791

带有第二个视口元标记：

初始加载：

980x1449（通常）
980x1292（有时）

刷新：

600x791

暂停一秒：

600x791

综上所述，我看到以下内容：

刷新页面始终提供一致、稳定的尺寸。
等待一秒钟也总是会得到相同的结果。
最初的结果各不相同，但总是与事情稳定后得到的结果不同。
两个视口元标记产生相同的结果； width=device-width 似乎无关紧要。
最显着的区别是在使用任一视口元标记时，这表明初始的window.onload 在视口元标记应用于文档之前触发。但即使没有该标记，也可以看出差异，这表明无论哪种方式，在第一次调用代码时事情还没有最终确定。

我在 Nexus 6 上得到了类似的结果（当然，不同的尺寸，但总体模式相同），只是我在初始加载时得到了“0x0”。

问题

我想知道如何让我的应用程序等待使用window.innerWidth 和window.innerHeight，直到他们最终确定它们将成为什么。我试着等待一个动画帧，有点令人惊讶的是，这不起作用。显然等待我的应用程序启动一秒钟是不可取的，因为减少超时值直到我找到“通常有效”的东西。难道我做错了什么？是否有了解何时可以安全访问这些值的最佳做法？

【问题讨论】：

标签： javascript html dom mobile viewport

【解决方案1】：

也许你可以使用 jQuery

 $( document ).ready(function() {
 console.log('DOM ready');

 //your functions here

});

(http://api.jquery.com/ready/)

如果它只是一个 webapp，你也可以使用 bootstrap。 (http://getbootstrap.com/) 这是移动优先技术。希望对您有所帮助。

【讨论】：

也许这也不错：$(window).load(function() { ... });等到一切，图像也完全加载。