iOS iPadOS safari 獨立Web應用屏幕旋轉(zhuǎn)的時候 onresize window.innerHeight 數(shù)值不對
一、問題描述
我有一個日記應用，是可以作為獨立 Web 應用運行的那種，但在旋轉(zhuǎn)屏幕的時候獲取到的 window.innerHeight 和 window.innerWidth 就不對了，不是屏幕的正常尺寸。導致內(nèi)容顯示不正常。iPhone和 iPad 上都是這樣的。
本來應該是這樣的。
在旋轉(zhuǎn)一次再轉(zhuǎn)回來的時候就成了這樣
我在程序里是這樣寫的：
window.onresize = () => {
this.SET_INSETS({
windowsHeight: window.innerHeight,
windowsWidth: window.innerWidth,
heightPanel: window.innerHeight - 45, // 除 navbar 的高度
})
}
二、問題解決
搜了下 google 找到了解決辦法：雖然 window.innerHeight 和 window.innerWidth 的數(shù)值不對，但 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)
}
加上這兩個輸出能看到結(jié)果，在屏幕旋轉(zhuǎn)的時候 clientHeight 和 clientWidth 的數(shù)值是正確的。
文章來源：http://www.zghlxwxcb.cn/news/detail-531844.html
三、結(jié)果
換獲取高度和寬度的途徑換成 document.documentElement.clientHeight 和 document.documentElement.clientWidth 就好了文章來源地址http://www.zghlxwxcb.cn/news/detail-531844.html
到了這里，關(guān)于iOS iPadOS safari 獨立Web應用屏幕旋轉(zhuǎn)的時候 onresize window.innerHeight 數(shù)值不對。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
