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) => {// IOSif (isIOSByUA()) {document.body.addEventListener('focusin', () => {//软键盘弹出的事件处理callback(true)})document.body.addEventListener('focusout', () => {//软键盘收起的事件处理callback(false)})} else {// Androidconst originalHeight =document.documentElement.clientHeight || document.body.clientHeightwindow.addEventListener('resize', () => {const resizeHeight =document.documentElement.clientHeight || document.body.clientHeightif (resizeHeight - 0 < originalHeight - 0) {// 键盘弹起事件callback(true)} else {// 键盘收起事件callback(false)}})}
}
