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')
  }
}