h5 ios系統(tǒng)在微信瀏覽器兼容問題導(dǎo)致的事件錯亂問題

最近發(fā)現(xiàn)很多人都碰到類似的問題,這個其實是input聚焦后頁面被頂起,然后失焦后頁面回位,但是這里只是視覺上回位了,window其實已經(jīng)被頂上去一定的距離。

你再次點擊頁面時就已經(jīng)錯位了,目前只發(fā)現(xiàn)部分ios在微信瀏覽器有這個問題

所以只針對ios系統(tǒng)且在微信瀏覽器上做兼容就可以,這里在網(wǎng)上找到一個初版做了小優(yōu)化,可以直接復(fù)制到一個JS,引用就好

// 兼容部分ios手機input失焦后頁面上移問題
(function() {
  let myFunction
  let isWXAndIos = isWeiXinAndIos()
  if (isWXAndIos) { // 既是微信瀏覽器 又是ios============(因為查到只有在微信環(huán)境下,ios手機上才會出現(xiàn)input失去焦點的時候頁面被頂起)
    document.body.addEventListener('focusin', () => { // 軟鍵盤彈起事件
      clearTimeout(myFunction)
    })
    document.body.addEventListener('focusout', () => { // 軟鍵盤關(guān)閉事件
      clearTimeout(myFunction)
      myFunction = setTimeout(function() {
        window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重點  =======當鍵盤收起的時候讓頁面回到原始位置
      }, 200)
    })
  }
})()

function isWeiXinAndIos() {
  // window.navigator.userAgent屬性包含了瀏覽器類型、版本、操作系統(tǒng)類型、瀏覽器引擎類型等信息,這個屬性可以用來判斷瀏覽器類型
  let ua = '' + window.navigator.userAgent.toLowerCase()
  // 通過正則表達式匹配ua中是否含有MicroMessenger字符串且是IOS系統(tǒng)
  let isWeixin = /MicroMessenger/i.test(ua) // 是在微信瀏覽器
  let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua) // 是IOS系統(tǒng)
  return isWeixin && isIos
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容