hack ios12 wechat 6.7.4 软键盘顶起页面后

当你看到这里你一定发现了在ios12+，微信6.7.4版本上
H5软键盘弹起后会把页面顶起（这是正常现象）
但是当你收起软键盘时，被顶起的部分不会回弹，造成页面底部留有一块空白。。

这还不是最恶心的

如果底部使用了fixed布局（比如一个弹层，弹层中的输入框触发了键盘收起），那就不光是丑了，按钮还不可以点击，因为位置发生了变化，他停留在了被fixed顶到的那个位置。

这个时候，我们将屏幕做一下滚动，问题即消失
所以就考虑用代码滚动一下屏幕来hack这个问题

撸它：
用vue做个🌰

data() {
  return {
    scrollTop: 0  // 用来记录滚动位置
  }
},
mounted() {
  window.addEventListener('scroll', this.scrollFn);  // 监听scroll
  // hack ios12 wechat 6.7.4 软键盘顶起页面后收起键盘页面不回弹
  document.body.addEventListener('focusout', () => {   // 解决问题就在这里，键盘收起的事件中主动做一下scrollTo
    window.scrollTo(0, this.scrollTop - 1);
    window.scrollTo(0, this.scrollTop);
  });
},
destroyed() {
  window.removeEventListener('scroll', this.scrollFn);  // 销毁监听
},
methods: {
  getScrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
  },
  scrollFn() {
    this.scrollTop = this.getScrollTop();
  }
}

如果你不想影响所有机型，只想在bug版本做一下hack，那就可以先判断一下版本再处理

const wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
const wechatVersion = wechatInfo[1] 
const u = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (wechatVersion=='6.7.4'&&!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
  // do hack
}

附上ios、android监听键盘状态的方法

ios

document.body.addEventListener('focusin', () => {  //软键盘弹起事件
  console.log("键盘弹起")  
})

document.body.addEventListener('focusout', () => { //软键盘关闭事件
  console.log("键盘收起")  
})

android
请先判断android环境，ios不支持resize监听

const winHeight = document.documentElement.clientHeight // 原始高度
window.addEventListener('resize', () => {
  const nowHeight = document.documentElement.clientHeight
  if (winHeight - nowHeight > 50) {
    //当软键盘弹出，在这里面操作
  } else {
    //当软键盘收起，在此处操作
  }
})