在用vue-cli腳手架搭建手機H5頁面應用的時候，其中一頁中部有input，底部有position：absolute；bottom：0的元素，

當點選input框時在安卓手機上出現了：

1 虛擬鍵盤彈出蓋住input

2 底部定位的元素被擠上來

網路上很多關於body設定寬高以及scrolltop的方法都不管用，因為這裡是路由頁面，根據網上的思路，吊起輸入鍵盤的時候頁面的高度是變化的，監聽window.onresize，判斷是否吊起鍵盤，然後設定底部模組的隱藏和顯示，整個塊元素的margintop就可以實現了。

程式碼如下

 mounted () {
    this.clientHeight = document.documentElement.clientHeight;
    const that = this;
    // 安卓手機鍵盤吊起擋住輸入框

    window.onresize = function() {

      if(document.documentElement.clientHeight < that.clientHeight) {
        // scrollVal為負值
        let scrollVal = document.documentElement.clientHeight-that.clientHeight;
        $(".alert-main").css("marginTop",scrollVal);
        $(".bottom-create").hide();
      }else {
        $(".alert-main").css("marginTop",0);
        $(".bottom-create").show();
      }
      
    };
  },

今天這個bug 遇到了新問題，同樣的華為手機上，當從別的路由吊起輸入鍵盤的時候回到當前路由，

document.documentElement.clientHeight就變成了減去輸入鍵盤高度的值，

這時需要在頁面第一次載入將document.documentElement.clientHeight記錄到store中，store中的值不會因為頁面重新渲染而改變。