3

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

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

初始负载时，方向改变前

方向更改为横向并返回纵向后

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

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

谢谢

4

1 回答 1

1

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

在此代码段中设置暂停以查看效果。请注意（至少在 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>

于 2020-12-27T09:24:31.597 回答