iOS 13 WebView 键盘收起后底部留白无法复位问题如何解决

前端H5侧适配方案（无需修改原生容器代码） #

• 基础配置校验：确保页面头部已添加正确的viewport声明

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

• 监听输入框状态手动复位视口：通过监听输入框的失焦事件，在iOS 13环境下手动回滚视口到原始位置，代码示例如下：

// 匹配iOS 13系统
const isIOS13 = /iPhone OS 13_/.test(window.navigator.userAgent)
// 存储输入框聚焦时的原始滚动位置
let originScrollTop = 0

// 遍历所有表单输入元素绑定事件
document.querySelectorAll('input, textarea').forEach(el => {
  el.addEventListener('focus', () => {
    originScrollTop = document.documentElement.scrollTop || document.body.scrollTop
  })
  el.addEventListener('blur', () => {
    if (!isIOS13) return
    // 延迟执行避开键盘收起动画过程
    setTimeout(() => {
      // 滚动回原始位置
      window.scrollTo({
        top: originScrollTop,
        behavior: 'auto'
      })
      // 额外修复视口高度计算异常
      document.body.style.height = `${window.innerHeight}px`
      setTimeout(() => {
        document.body.style.height = ''
      }, 10)
    }, 20)
  })
})

原生容器侧适配方案（原生APP嵌入WebView场景优先使用） #

监听系统键盘收起通知，在iOS 13系统下主动复位WebView的滚动位置，Swift代码示例如下：

// 注册键盘收起监听
NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)

@objc func keyboardWillHide(notification: NSNotification) {
    // 仅适配iOS 13版本，iOS 14及以上官方已修复无需处理
    if #available(iOS 14.0, *) {
        return
    } else if #available(iOS 13.0, *) {
        guard let userInfo = notification.userInfo else { return }
        // 与键盘动画保持同步避免闪烁
        let duration = userInfo[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double ?? 0.25
        UIView.animate(withDuration: duration) {
            // 复位WebView滚动偏移
            self.webView.scrollView.contentOffset = .zero
            // 如需保留用户原有滚动位置，可替换为恢复focus前存储的contentOffset值
        }
    }
}

问题现象参考截图 #

内容的提问来源于stack exchange，提问作者Johji