vue 解决安卓手机键盘顶起绝对定位fixed值问题

场景描述：

安卓手机APP的webview中点击H5页面input输入框，键盘弹起顶起了绝对定位fixed值模块区域，IOS测试正常。

解决方案：

通过监听屏幕高度的变化判断安卓键盘是否弹起，如果没有变化就显示绝对定位fixed值模块区域，反之则隐藏。

核心代码：

data () {
    return {
      docmHeight: document.documentElement.clientHeight,  //默认屏幕高度       
      realHeight:  0, //实时屏幕高度 
      showFooter: true, //显示底部fixed       
    }
  },

watch:{
    realHeight:function() {
        //如果默认高度大于实际高度则影藏，反之就显示
      if(this.docmHeight > this.realHeight){            
        this.showFooter = false        
      }else{            
        this.showFooter = true        
      }
    }
  },

mounted(){
    window.onresize = ()=>{
      return(()=>{                     
        // 实时屏幕高度                       
        this.realHeight = document.body.clientHeight         
      })()    
   } 
  },

总结与其他：

对于监听屏幕高度的变化，我们除了对绝对定位fixed值模块区域处理之外，还可以对输入框失去焦点做处理。我们都知道安卓手机收起键盘，并不会触发输入框失去焦点，而是需要我们再去单独点击页面其他地方触发失去焦点。因此，我们可以通过监听屏幕高度的变化，来进一步优化此种场景处理。