モバイル端末H 5ページの下部メニューが携帯電話のキーボードに突きつけられる問題

これまでのプロジェクトではずっとこの問題があったが、微信側でも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の変化を監視し、高さが変化したかどうかを判断し、isOriginHeigtフィールドを変更する

watch: {
   screenHeight (val) {
    if(this.originHeight - val>60) {    // ， 60px footer
      this.isOriginHeight = false;
    }else{
      this.isOriginHeight = true;
    }
  }
}

以上
vueを使わない仲間はこの考えを参考にすることができます
今のところこの方法はまだ問題に直面していないので、問題に直面した仲間はコメントして交流することができます.