h5 ios系统在微信浏览器兼容问题导致的事件错乱问题

最近发现很多人都碰到类似的问题，这个其实是input聚焦后页面被顶起，然后失焦后页面回位，但是这里只是视觉上回位了，window其实已经被顶上去一定的距离。

你再次点击页面时就已经错位了，目前只发现部分ios在微信浏览器有这个问题

所以只针对ios系统且在微信浏览器上做兼容就可以，这里在网上找到一个初版做了小优化，可以直接复制到一个JS，引用就好

// 兼容部分ios手机input失焦后页面上移问题
(function() {
  let myFunction
  let isWXAndIos = isWeiXinAndIos()
  if (isWXAndIos) { // 既是微信浏览器 又是ios============（因为查到只有在微信环境下，ios手机上才会出现input失去焦点的时候页面被顶起）
    document.body.addEventListener('focusin', () => { // 软键盘弹起事件
      clearTimeout(myFunction)
    })
    document.body.addEventListener('focusout', () => { // 软键盘关闭事件
      clearTimeout(myFunction)
      myFunction = setTimeout(function() {
        window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点  =======当键盘收起的时候让页面回到原始位置
      }, 200)
    })
  }
})()

function isWeiXinAndIos() {
  // window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
  let ua = '' + window.navigator.userAgent.toLowerCase()
  // 通过正则表达式匹配ua中是否含有MicroMessenger字符串且是IOS系统
  let isWeixin = /MicroMessenger/i.test(ua) // 是在微信浏览器
  let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系统
  return isWeixin && isIos
}