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端:
1.input输入框获得焦点focus键盘弹起时,我们将fixed的元素隐藏display:none

2.当input框blur失去焦点键盘收起时,我们将fixed的元素恢复显示display:block

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