Android & IOS键盘弹起对h5界面的影响

Android

IOS

一、ios 的具体情形

问题一：

在iOS 8.2 之后，Webkit 鼻祖 Safari 将 fixed 元素的布局基准区域从键盘上方的可见区域改成了键盘背后的整个视窗，也就是说此时的webview高度并不会发生变化，键盘是直接盖在webview上方的

IOS 为了不让 webview 压缩，并且为了不让软键盘遮挡输入框，他们自作聪明地把 webview 整体往上移动，最大移动距离为软键盘的高度。

问题二：

此时的webview是可以滑动的，那么就会出现有用户会将输入框滑动到键盘下方

并且你会发现，在页面的上方与下方都多出了一个不论是 Viewport 还是 VisualViewport 都无法到达的白色衬底区域

二、监听方案

Android 使用 resize 来实现，但对于 IOS，webview 高度并不发生变化，所以触发不了 resize

所以 IOS 需要通过 focusin & focusout 来监听

export const watchKeyBoard = (callback: (isShow: boolean) => void) => {
  //  IOS
  if (isIOSByUA()) {
    document.body.addEventListener('focusin', () => {
      //软键盘弹出的事件处理
      callback(true)
    })
    document.body.addEventListener('focusout', () => {
      //软键盘收起的事件处理
      callback(false)
    })
  } else {
    //  Android
    const originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    window.addEventListener('resize', () => {
      const resizeHeight =
        document.documentElement.clientHeight || document.body.clientHeight
      if (resizeHeight - 0 < originalHeight - 0) {
        // 键盘弹起事件
        callback(true)
      } else {
        // 键盘收起事件
        callback(false)
      }
    })
  }
}