fixed定位元素被安卓、ios鍵盤頂起的解決辦法

問題背景:

    當咱們在寫H5頁面時常常會有fixed固定位置的元素存在,例以下圖左中的"做業幫一課APP下載框",當咱們input輸入的時候鍵盤會彈起並將fixed定位的下載框頂起,以下圖右,ios和安卓部分機型都會有問題,如今針對兩個系統總結出來兩個解決方案:

安卓端:   

  在安卓端,當咱們呼起鍵盤時,窗口的高度(document.documentElement.clientHeight)會改變,也就是會觸發window.onresize事件,咱們根據resize事件去作相關操做:

1.windows.resize事件被觸發    

2.判斷是安卓 or ios

3.是安卓端,判斷窗體默承認見高度  var client_h = document.documentElement.clientHeight; 是否比如今的窗體可見高度 var body_h = document.documentElement.clientHeight; 小

4.若是client_h  > body_h ,則說明視口變小,fixed元素會被鍵盤頂起,此時須要將fixed定位改成static 

5.當 client_h  <= body_h 則說明鍵盤已收起,此時須要將static 定位改成 fixed 既可

代碼以下:

/**
 * 鍵盤高度適配
 */
function fixedKeyboard() {
  var client_h = document.documentElement.clientHeight;
  $(window).on("resize",function(){
    if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
            //ios這塊什麼都不用作
    } else {
       //安卓觸發window.resize
      var body_h =  document.documentElement.clientHeight;
      if(client_h > body_h){
        $('.donwload-btn_fix').css('position','static')
        console.log("ad小了");
      }else{
        $('.donwload-btn_fix').css('position','fixed')
        console.log("ad正常")
      }
    }

  })
}

 

IOS端:

    在ios上,不能經過視口高度改變去適配了,通過多方面嘗試,通入input窗口的focus和blur事件去解決是最爲靠譜的:

1.input輸入框得到焦點focus鍵盤彈起時,咱們將fixed的元素隱藏display:none

2.當input框blur失去焦點鍵盤收起時,咱們將fixed的元素恢復顯示display:block

注:固然咱們ios端上也能夠根據這兩個事件去作其餘效果上的處理,不過控制元素顯示隱藏我認爲是最佳方案,否則還有不少坑等着你呦~

attractionNameBtn.on('input', function (e) {
  // 用戶輸入時的邏輯
}).on('focus', function () {

  iosKeyboard()

}).on('blur', function(){

  $('.donwload-btn_fix').css('display','block') // input失焦後恢復fixed

})

/*ios鍵盤bug*/
function iosKeyboard() {
  if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
    $('.donwload-btn_fix').css('display','none')
  }
}