Javascript DOM窗口尺寸何时确定？_Javascript_Html_Dom_Mobile_Viewport

Javascript DOM窗口尺寸何时确定？

javascript html dom mobile

Javascript DOM窗口尺寸何时确定？,javascript,html,dom,mobile,viewport,Javascript,Html,Dom,Mobile,Viewport,我的web应用程序在使用window.innerWidth和window.innerHeight时遇到问题，直到它们看起来稳定下来。在我的桌面上一切正常，但我在多个移动设备上遇到了这个问题（所有设备都运行当前稳定的Android版Chrome）。我已将问题简化为我认为最简单的重现问题的方法： <!DOCTYPE html> <html> <head> <!--meta name="viewport" content="initial-scal

我的web应用程序在使用

window.innerWidth

和

window.innerHeight

时遇到问题，直到它们看起来稳定下来。在我的桌面上一切正常，但我在多个移动设备上遇到了这个问题（所有设备都运行当前稳定的Android版Chrome）。我已将问题简化为我认为最简单的重现问题的方法：

<!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>


函数dimen（）{
警报（“+window.innerWidth+”x“+window.innerHeight）；
}
window.onload=dimen；
设置超时（dimen，1000）；

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

不带视口元标记：

初始荷载：

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

刷新：

980x1292

暂停一秒钟：

980x1292

带有第一个视口元标记：

初始荷载：

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

刷新：

600x791

暂停一秒钟：

600x791

带有第二个视口元标记：

初始荷载：

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

刷新：

600x791

暂停一秒钟：

600x791

综上所述，我看到以下几点：

刷新页面始终会提供一致、稳定的维度
等待一秒钟也总是得到同样的结果
最初的结果各不相同，但它们总是不同于我在事情稳定后得到的结果
两个视口元标记产生的结果彼此相同<代码>宽度=设备宽度似乎无关紧要
最显著的区别是在使用任一视口元标记时，这表明在将视口元标记应用于文档之前启动了初始
```
窗口。onload
```
。但是，即使没有这个标记，也可以看到差异，这表明无论哪种方式，当代码第一次被调用时，事情还没有最终确定

我在Nexus6上得到了类似的结果（当然是不同的维度，但总体模式相同），除了在初始加载时得到了“0x0”

问题

我想知道如何让我的应用程序等待使用

window.innerWidth

和

window.innerHeight

，直到他们最终确定要使用什么。我试着等待一个动画帧，但有点令人惊讶的是，这没有起作用。显然，等待一秒钟让我的应用程序启动是不可取的，因为在我找到“正常工作”的东西之前减少超时值也是不可取的。我做错什么了吗？是否有一个最佳实践来了解何时可以安全访问这些值？

也许您可以将jQuery与

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

 //your functions here

});

（）

如果只是一个webapp，你也可以使用bootstrap。() 这是移动第一技术。希望能有所帮助。

也许这也很好：$（window.load（function（）{…}）；等待，直到一切都完成，图像也加载完毕。