移動端鍵盤彈起導致底部按鈕上浮解決方案

問題描述：移動端頁面輸入框聚焦伴隨着鍵盤彈起，底部icon浮到鍵盤上方，導致樣式不友好

解決思路：在鍵盤彈起時，不讓原本固定在底部的icon自動浮起。監聽屏幕的實時高度，控制底部按鈕的顯示與否，從而達到按鈕固定在底部的效果。

解決方案（本例是在vue框架下實現的解決方案代碼）：

html:

<div class="login-content-footer" v-if="heightChange">
   <img src="../../assets/images/login-wxLogin.png" alt="" class="login-content-footer-wxLogin" @click="wxLogin" v-show="WxFlag">
   <img src="../../assets/images/personal-footer.png" class="login-content-footer-img">
</div>

data部分:

data () {
   return {
      heightChange: true,
      docmHeight: document.documentElement.clientHeight,  //默認屏幕高度
      showHeight: document.documentElement.clientHeight,   //實時屏幕高度
  }
}    

監聽屏幕實時高度：　　

watch:{
    showHeight() {
        if (this.docmHeight > this.showHeight) {
          this.heightChange = false;
        } else {
          this.heightChange = true;
        }
      },
}

mounted周期:

mounted() {
      // window.onresize監聽頁面高度的變化
      window.onresize = () => (() => {
        this.showHeight = document.body.clientHeight;
      })();
},　

結果：

Android手機鍵盤彈起時實時屏幕高度會改變，但是蘋果手機無論是默認輸入法還是安裝的其他輸入法，鍵盤彈出的高度不會改變，但是慶幸的是大部分ios已經支持了fixed屬性

還發現一個小的bug就是蘋果手機點擊輸入框時偶爾會閃現一個icon,通過給父元素加入position:relative和足夠的padding-bottom解決了，之后我發現可以用position:absolute定位父元素給position:relative和足夠的padding-bottom能達到同樣的效果^_^