据我所知，屏幕的宽度/高度在设备旋转后不会改变。要检查设备是否旋转，您可以读取这些属性
1.窗口方向：该值从0更改为+90/-90
1.窗口内部高度/内部宽度：这些值将交换
1.文档.文档元素.客户端高度/客户端宽度：这些值将交换
不幸的是，这种行为在所有Android/iOS/Window设备上并不一致。我认为this figure中对此有很好的解释。

iOS过去会恢复屏幕的大小，就像它是纵向的一样。他们在iOS 8上改变了它（在原生类上），但他们可能忘记了在Safari上这样做，或者他们保持这种方式是为了兼容性。
如果需要基于方向的真实的大小，可以使用window.innerWidth和window.innerHeight
无论是否使用viewport meta标记，我都得到相同的值
它在Chrome模拟可视化上运行良好，因为它返回了模拟可视化的屏幕大小，这是它应该返回的，但它不模拟基于设备运行的操作系统，因此您不会获得与真实的设备上相同的值（在这种情况下，真实设备没有返回正确的值）

CSS无法检测方向更改。
使用JavaScript获取方向更改。
将函数添加为

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

这将向window添加一个event Handler，以在方向更改时更改body的width。
有关orientationchange的更多参考

jQuery移动的具有处理方向更改事件onOrienntetionChange事件，且具有手动更改方向的$(window).orientationchange();函数。

考虑到这是移动的和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() })
}