方向更改事件后 Chrome iOS 87.0.4280.77 中的 window.innerWidth 不正确答案

【问题标题】：window.innerWidth incorrect in Chrome iOS 87.0.4280.77 after orientation change event方向更改事件后 Chrome iOS 87.0.4280.77 中的 window.innerWidth 不正确
【发布时间】：2021-04-04 09:19:58
【问题描述】：

在方向更改事件后，Chrome iOS 87.0.4280.77 上的 window.innerWidth 似乎不正确。在 iPhone 上查看时，初始加载时 innerWidth 为 414px。将手机方向更改为横向再回到纵向后，innerWidth 变为 326px。

我还使用https://whatismyviewport.com 检查了内部宽度，它显示的内部宽度值与我的代码相同。

On initial load, before orientation change

After orientation change to landscape and back to portrait

<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>

<script type="text/javascript">
    alert("innerWidth1:"+window.innerWidth);  // initial innerwidth before orientation change

    window.addEventListener('orientationchange', function() {
        alert("innerWidth2:"+window.innerWidth);  // innerwidth after orientation change
    });

</script>

</body>
</html>

以前有没有其他人遇到过这个问题？

谢谢

【问题讨论】：

标签： javascript ios google-chrome orientation-changes

【解决方案1】：

在orientationChange函数运行时window.innerWidth读数似乎没有改变，但是如果我们设置一个超时并再次读取它，它已经变成了它的预期值。

在这个sn-p中设置Pause看看效果。请注意（至少在 iPad 上 IOS14.2 上的 Safari 上）0 毫秒的暂停足以强制重新评估 innerWidth。

我试图找到这种行为的官方文档，但到目前为止都失败了，尽管那里有很多讨论。就好像系统必须“重新绘制”窗口并在这样做时找出实际的内部宽度。无论如何，一个实用的解决方法似乎是引入 setTimeout，可能会暂停 1ms 以“以防万一”而不是 0ms（过去我看到 Firefox 在某些系统上不会在 0ms 上重新绘制）。此外，requestAnimationFrame 没有得到正确的宽度。

    <html>
    <head>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    </head>
    <body>
    <div id="info"></div>
    Pause: <button onclick="pause = 10000">10000</button>  <button onclick="pause = 10">10</button>  <button onclick="pause = 0">0</button>
    <script type="text/javascript">
        const info = document.getElementById('info');
        let pause = 10000; //number of ms to wait before read innerHTML again
        
        info.innerHTML = "innerWidth1:"+window.innerWidth;  // initial innerwidth before orientation change

        window.addEventListener('orientationchange', function() {
            info.style.color = 'red';
            info.innerHTML = "innerWidth on orientation change before pause:"+window.innerWidth;
            setTimeout(function() {info.style.color = 'blue';
                info.innerHTML = "innerWidth after orientation change and a pause of: " + pause + 'ms ' + window.innerWidth}, pause);  // innerwidth after orientation change
               });

    </script>

    </body>
    </html>

【讨论】：

谢谢，但它似乎并没有解决问题。这里的主要问题是初始的innerWidth是正确的，并且在方向从纵向变为横向再回到纵向后，innerWidth是不正确的。我在 iOS 上尝试过其他浏览器，如 Safari 和 Firefox，在这两种浏览器中，方向更改后的 innerWidth 与初始的 innerWidth 一致。不确定为什么 Chrome 上的方向更改后的 innerWidth 不正确
这很奇怪，在我的 iOS iPad 上，完成 setTimeout 后内部宽度是正确的。它们在方向更改事件处理程序中不正确，我们必须等待 setTimeout。找到后我会在 iPhone 上试用。
我在iPad Mini上试过，初始的innerWidth与方向从纵向到横向再回到纵向后的innerWidth一致。所以这个问题似乎只影响 iPhone。