移动端H5页面底部菜单被手机键盘顶起来问题

之前的项目一直都有这个问题，不管是微信端还是用webview打包成app，今天下定决心要解决这个问题。

经测试发现，底部菜单（footer）被顶起来的原因，是手机开启键盘之后，“浏览器”的高度发生了变化，而底部菜单的position属性是fixed，所以就出现在底部了。

因此对应的解决方案是，监听“浏览器”高度，当产生变化时，隐藏底部菜单。

document.body.clientHeight 指的是body对象高度
document.documentElement.clientHeight 指的是可见区域高度，此处用它

我用的是vue，将footer封装了个组件

先在data里定义几个字段

data: function(){
  return {
     screenHeight: document.documentElement.clientHeight,     // 当前高度
     originHeight: document.documentElement.clientHeight,     //默认高度，用作比较
     isOriginHeight: false    //当前高度是否仍等于默认高度
  };
}

在html中，通过 isOriginHeight 字段控制隐藏/显示footer

  ...

在模板挂载完成后，添加【浏览器窗口改变时触发函数】给 screenHeight 字段赋值

mounted() {
  window.onresize = () => {
    return (() => {
      this.screenHeight = document.documentElement.clientHeight;
    })()
   }
}

监听watch变化，判断高度是否改变，改变isOriginHeight 字段

watch: {
   screenHeight (val) {
    if(this.originHeight - val>60) {    //这里以防万一改了下判断形式，当屏幕高度减少了60px以上时才隐藏footer
      this.isOriginHeight = false;
    }else{
      this.isOriginHeight = true;
    }
  }
}

以上

不用vue的小伙伴可以参考这个思路

目前为止这个方法暂时还没遇到问题，有遇到问题的小伙伴可以评论交流