Javascript 屏幕旋转后不更新screen.width/screen.height

我在iPhone设备（iPhone 7、iOS 10，还有其他iPhone）上遇到了这个问题：在javascript中，如果我截获了方向更改事件，在处理程序中，screen.width和screen.height保持不变（与旋转之前一样）

由于这可能取决于视口设置，因此在.html文件中声明“我的视口”的方式如下：

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

在Chrome的模拟可视化中，一切正常

---

提前感谢您的帮助。

据我所知，屏幕旋转后，设备的宽度/高度不会改变。要检查设备是否旋转，可以读取以下属性

窗口方向：此值从0更改为+90/-90

窗口。innerHeight/innerWidth：此值被交换

document.documentElement.clientHeight/clientWidth：此值被交换

---

不幸的是，这种行为在所有Android/iOS/Window设备上并不一致。我认为这在中得到了很好的解释。

iOS用来返回屏幕的大小，就好像它是纵向的一样。 他们在iOS 8上（在本机类上）更改了它，但他们可能忘记了在Safari上这样做，或者他们为了兼容性而保留了它

如果需要基于方向的实际尺寸，可以使用

window.innerWidth

和

window.innerHeight

无论是否使用viewport meta标记，我都会得到相同的值

---

它在Chrome模拟可视化上运行良好，因为它返回模拟可视化的屏幕大小，这是它应该返回的，但它不模拟基于设备运行的操作系统，因此您不会得到与真实设备相同的值（在这种情况下，真实设备不会返回良好的值）jQuery mobile有处理方向更改事件的事件，并且有

$（window）.orientationchange（）手动更改方向的功能。
CSS无法检测到方向更改

使用JavaScript获得方向更改

将函数添加为

window.addEventListener("orientationchange", function() {
  document.body.style.width = window.innerWidth;
});

这将向
窗口添加
事件处理程序
，以在方向更改时更改
主体的
宽度

更多关于
的参考考虑到这是移动和iOS设备的一种行为，此功能可能会对您有所帮助。验证设备、方向和操作系统

import isMobile from 'ismobilejs'
/* For practical example: @see: https://www.npmjs.com/package/ismobilejs */
function windowSize() {
    let [_width, _height] = [window.innerWidth, window.innerHeight]
    // detect if device is mobile or tablet
    if (isMobile(window.navigator).any) {
        [_width, _height] = [window.screen.width, window.screen.height]
        // detect if device is iOS and horizontal orientation
        if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
            // Horizontal orientation are equal to -90 or 90 degrees
            if (Math.abs(window.orientation) == 90) {
                _width = window.screen.height
                _height = window.screen.width
            }
        }
    }
    return {
        width: _width,
        height: _height
    }
}

在移动设备上更改方向或在桌面上调整窗口大小时调用此函数

let _windowSize = windowSize() // Return { width: realWidth, height: realHeight }
if (isMobile(window.navigator).any) {
    window.addEventListener("resize", () => { _windowSize = windowSize() })
} else {
    window.addEventListener("orientationchange", () => { _windowSize = windowSize() })
}

iPhone上有什么浏览器，Safari还是Chrome？我用的是Safari，我没有用Chrome测试过它。我们可以用
jquery
吗？@GabrieleD'Antona检查答案，如果需要任何帮助，请告诉我
window。在iPad上倒置时，方向可以是180。即使旋转后，我也会得到window.innerHeight/innerWidth的旧值。addEventListener（“orientationchange”，（）=>{console.log（window.innerHeight）}）它将打印旧值。。。关于这一点，你所说的交换值是什么意思？旋转后会更新window.innerWidth吗？@OlivierBoissé