Wil*_*ill 5 javascript google-chrome orientation-changes ios
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>以前有其他人遇到过这个问题吗？
谢谢
当orientationChange函数运行时，window.innerWidth读数似乎没有改变，但是如果我们设置超时并再次读取它，它就会改变为预期值。
在此片段中设置暂停以查看效果。请注意（至少在 iPad 上 IOS14.2 上的 Safari 上）0 毫秒的暂停足以强制重新评估 innerWidth。
我试图找到这种行为的官方文档，但到目前为止还没有成功，尽管有很多讨论。就好像系统必须“重新绘制”窗口，并在这样做时找出实际的内部宽度。不管怎样，一个实际的解决方法似乎是引入 setTimeout，也许“以防万一”暂停 1 毫秒而不是 0 毫秒（我过去见过 Firefox 在某些系统上不会在 0 毫秒时触发重绘）。此外，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>| 归档时间： |
|
| 查看次数： |
2048 次 |
| 最近记录： |