iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对。

iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对

一、问题描述

我有一个日记应用，是可以作为独立 Web 应用运行的那种，但在旋转屏幕的时候获取到的 window.innerHeight 和 window.innerWidth 就不对了，不是屏幕的正常尺寸。导致内容显示不正常。iPhone和 iPad 上都是这样的。

本来应该是这样的。

在旋转一次再转回来的时候就成了这样

我在程序里是这样写的：

window.onresize = () => {
    
    
    this.SET_INSETS({
    
    
        windowsHeight: window.innerHeight,
        windowsWidth: window.innerWidth,
        heightPanel: window.innerHeight - 45, // 除 navbar 的高度
    })
}

二、问题解决

搜了下 google 找到了解决办法：虽然 window.innerHeight 和 window.innerWidth 的数值不对，但 document.documentElement 的 clientHeight 和 clientWidth 是对的。

window.onresize = () => {
    
    
    this.SET_INSETS({
    
    
        windowsHeight: window.innerHeight,
        windowsWidth: window.innerWidth,
        heightPanel: window.innerHeight - 45, // 除 navbar 的高度
    })
    console.log('window.innerHeight:', window.innerHeight, window.innerWidth)
    console.log('clientWidth:', document.documentElement.clientWidth, document.documentElement.clientHeight)
}

加上这两个输出能看到结果，在屏幕旋转的时候 clientHeight 和 clientWidth 的数值是正确的。

三、结果

换获取高度和宽度的途径换成 document.documentElement.clientHeight 和 document.documentElement.clientWidth 就好了