fixed定位元素被安卓、ios键盘顶起的解决办法

2019独角兽企业重金招聘Python工程师标准>>>

问题背景:

    当我们在写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')
  }
}

转载于:https://my.oschina.net/jamesview/blog/1841946