Question

我在使用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上有类似的结果（不同的尺寸，当然，但是具有相同的整体模式），除了我曾经得到过＆＃34; 0x0＆＃34;在初始加载时。

问题

我想知道如何让我的应用等待使用window.innerWidth和window.innerHeight，直到他们完成了将要发布的内容。我试着等待一个动画框架，有些令人惊讶的是，它没有用。显然等待我的应用程序启动的时间是不可取的，因为减少超时的值，直到我发现＆＃34;通常可以工作＆＃34;。难道我做错了什么？是否有最佳实践可以确定何时可以安全访问这些值？

Answer 1

也许你可以使用jQuery和

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

 //your functions here

});

（http://api.jquery.com/ready/）

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

DOM窗口尺寸何时确定？

1 个答案: