WKWebView 的调整大小处理程序中未更新 window.innerWidth/Height答案

【问题标题】：window.innerWidth/Height not updated in resize handler in WKWebViewWKWebView 的调整大小处理程序中未更新 window.innerWidth/Height
【发布时间】：2017-04-09 02:12:35
【问题描述】：

当窗口使用 resize 事件改变大小时，我会更新一些全屏网页内容。

window.onresize = function()
{
    var width = window.innerWidth;
    var height = window.innerHeight;
    ...
}

这在 Safari 应用程序中运行良好，但在 WKWebView 中不起作用。当设备在WKWebView 中更改 iPhone 和 iPad 上的屏幕方向时，它给了我错误的窗口尺寸。

特别是对于 iPad，我在导航控制器中显示 Web 视图。当我切换到纵向模式时，我得到 (768x768) 尺寸，而不是 (768x960) 尺寸正确。

这个问题有解决办法吗？

【问题讨论】：

标签： ios safari wkwebview

【解决方案1】：

似乎window.clientWidth / window.clientHeight 在 resize 事件触发之前没有得到更新。

我找到了两个解决方案：

使用document.documentElement.clientWidth 而不是window.innerWidth
收听orientationchange 事件而不是resize 事件（window.clientWidth 似乎此时已更新）

【讨论】：

document.documentElement.clientHeight 在运行 IOS 14.4.1 的 iPad 上截至 2021 年 3 月 18 日没有更好