The value of onresize window.innerHeight is wrong when the screen of iOS iPadOS safari stand-alone web application is rotated.

The value of onresize window.innerHeight is incorrect when the screen of iOS iPadOS safari stand-alone web application rotates

1. Problem description

I have a diary application, the kind that can run as a standalone web application, but when I rotate the screen, the window.innerHeightand window.innerWidthI get are wrong, not the normal size of the screen. resulting in abnormal display of content. This works on both iPhone and iPad.

That's how it should have been.

This is what happens when you spin it once and turn it back

I wrote this in the program:

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

2. Problem solving

I searched google and found the solution: although the values ​​of window.innerHeightand window.innerWidthare wrong, document.documentElementthe clientHeightand of clientWidthare correct.

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)
}

clientHeightAdd these two outputs to see the result, and clientWidththe values ​​of and are correct when the screen is rotated .

3. Results

Just change the way to get the height and width to document.documentElement.clientHeightanddocument.documentElement.clientWidth