JS 方向更改侦听器未在 iOS 上触发，但在 Android 上触发

Question

我有这个代码：

window.addEventListener("orientationchange", orientation);

但它没有在 iPhone SE 运行 iOS 10.3 上触发 orientation()，但它在上触发摩托 G 运行 Android 5.1.

我需要它来更新取决于屏幕宽度的内容。如果未定义（浏览器差异），我使用 window.innerWidth 和 screen.width。

我的orientation()如下：

cpr = Math.floor(window.innerWidth/100) - 3;
if (navigator.userAgent.match(/iPhone|iPad|iPod/i) || navigator.userAgent.match(/Android/i)) cpr = Math.min(Math.floor(screen.width/100) - 1, 8);
if (!cpr || cpr <= 0) cpr = 1;
id('times').innerHTML = "";
updateTimes();

代码工作正常，只是在 iOS 上不工作。我在 Chrome 开发工具设备查看器中进行了尝试，它允许您使用不同的特定手机或设备来测试屏幕尺寸和 browser/device styling/code/user-agent。在那里工作得很好。

我尝试查看有关此问题的所有其他 Stack Overflow 问题，但他们没有回答我的问题。

您可以在 http://rucubing.bitballoon.com 查看该网站以了解其工作原理。

谢谢！

Answer 1

我在调整大小事件中遇到了类似的问题。我在 this page.

上找到了原因

Up until recently Mobile Safari has correctly posted the resize event after the viewport was resized and after page layout. However, that’s no longer the case. Instead it’s posted before the page has been completely laid out. Any JavaScript relying on clientWidth, clientHeight, getBoundingClientRect etc. in an onresize callback is now broken.

也许 orientationchange 事件在页面完全布局之前也被触发，所以 window.innerWidth return 一个错误的值。

编辑：

最近我发现 document.documentElement.clientWidth return 是正确的值。也许这可以帮助你。

JS 方向更改侦听器未在 iOS 上触发，但在 Android 上触发

JS orientation change listener not firing on iOS but on Android it does

javascript

iphone

orientation

screen-orientation

ios