在窗口调整大小事件时调用 window.innerHeight 没有给出正确的高度答案

【问题标题】：calling window.innerHeight upon window resize event doesn't give correct height在窗口调整大小事件时调用 window.innerHeight 没有给出正确的高度
【发布时间】：2019-07-30 23:05:56
【问题描述】：

我正在使用 window.onresize 来监听视口大小的变化，以便我可以适当地缩放我的内容（这是一个游戏 UI，因此使用 window.onresize + css scale 似乎最简单，欢迎其他建议）。

但是，在某些浏览器上，在 onresize 触发后立即调用 window.innerHeight 或 window.innerWidth 会产生错误的结果。

这是一个最小的工作示例：

<html>
  <head>
    <title>Firefox Resize bug</title>
    <link
      rel="manifest"
      href='data:application/manifest+json,{ "name": "onresize bug", "display":"standalone"}'
    />
  </head>
  <body>
    Height: <span id="heightField"></span>
    <br />
    Width: <span id="widthField"></span>
    <script>
      const heightField = document.getElementById("heightField");
      const widthField = document.getElementById("widthField");
      const updateSize = () => {
        heightField.textContent = window.innerHeight;
        widthField.textContent = window.innerWidth;
      };
      window.onresize = updateSize;
      updateSize();
    </script>
  </body>
</html>

这在 iOS 12 Safari 中运行良好，当您更改方向时，高度和宽度会正确更新。

但是，它在 iOS Firefox/Chrome 上不起作用（至少，不可靠），如果您将此应用程序添加到 iPhone 的主屏幕，它也不起作用（参见上面示例中的清单）

我通过在 onresize 事件后触发 updateSize 500 毫秒来解决这个问题，但这里到底发生了什么？

【问题讨论】：

截至 2021 年 3 月 18 日，iPad IOS 14.4.1 仍然存在问题

标签： javascript iphone firefox

【解决方案1】：

这是 webkit 中的一个错误。

https://bugs.webkit.org/show_bug.cgi?id=185886

在 iOS 中，当设备切换方向时，window.onresize 事件会在 WKWebView 中触发。但是，如果 WKWebView 使用自动布局定位，window.innerWidth 和 window.innerHeight 将在 window.onresize 事件处理程序中报告不正确的值。但是，如果手动定位 WKWebView 而不使用自动布局，window.innerWidth 和 window.innerHeight 将在事件处理程序中报告正确的值。

【讨论】：

【解决方案2】：

初始缩放和缩小以适应您的问题。
Using the viewport meta tag to control layout on mobile browsers

将视口元数据添加到您的头部

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

【讨论】：

感谢您的建议，这似乎很有用。我不确定它是否适用于我当前的项目，因为我没有缩放整个文档以适应。我只是缩放某些组件。