我在iPhone设备上遇到了这个问题（iPhone 7，iOS 10，还有其他iPhone）：在javascript中，如果我拦截orientationchange事件，在处理程序内部，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的模拟可视化中，一切正常。
在此先感谢您的帮助。
据我所知，屏幕宽度/高度在旋转后不会在设备中发生变化。要检查设备是否已旋转，您可以阅读这些属性
不幸的是，这种行为在所有Android / iOS / Window设备上都不一致。我认为这在this figure中得到了很好的解释。
iOS用于返回屏幕大小，就像它是纵向一样。他们在iOS 8（在本地类上）改变了它，但他们可能忘记为Safari做这件事，或者他们可能保持这种兼容性。
如果你想要基于方向的实际尺寸，你可以使用window.innerWidth和window.innerHeight
无论是否使用视口元标记，我都会得到相同的值
它可以在Chrome模拟可视化中正常工作，因为它会返回模拟可视化的屏幕大小，但它不会根据设备模拟应该运行的操作系统，因此您将无法获得相同的值就像在真实设备上一样（在这种情况下，真实设备不会返回好的值）
jQuery mobile有onOrienntetionChange事件处理方向改变事件，并且有$(window).orientationchange();函数手动改变方向。
CSS无法检测方向变化。
使用JavaScript获取方向更改。
添加函数为
window.addEventListener("orientationchange", function() {
document.body.style.width = window.innerWidth;
});
这将为event Handler增加一个window，以便在方向改变时改变width的body。
关于orientationchange的更多参考