Androidのソフトキーボードは動揺レイアウトを問題解決をポップアップ表示（JSが解決）

基本的な問題の説明

H5このページは、入力ボックス、ボタンを含み、全体のページがフルスクリーン（位置決めレイアウトはフルスクリーンの適応を行うために使用されている）、高さ100VHあります。

あなたが入力ボックスをクリックすると、ソフトキーボードは、電話、iPhoneのブラウザのレイアウトや正常なオリジナルをポップアップ表示されますが、アンドロイドでは、それは次のように表示されます：

あなたが見ることができ、キーボードがポップアップし、ページの非常に目に見える領域が圧縮されているので、その全体ページのレイアウトが変更されました。

• 最初に私の基本的なスタイルで：

/* 外层容器 */
.keyword-container{
  background: linear-gradient(#ea537e, #e82e3b);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
 }

分析と解決

それは我々がコンテナの固定の高さをあげるが、画面の高さの異なるモデルを検討するように、コンテナの高さが、圧縮されているので、画面の高さを取得するために使用JSダイナミックに必要であるので、同じではありませんし、その後コンテナに、アイデアがこれです。

mounted () {
    this.containerHeight = window.innerHeight  // 获取浏览器可用区域高度
},

最も外側のコンテナへのバインド

<div class="keyword-container" :style="{ height: containerHeight + 'px'}">

CSSはほとんど変化が必要です

/* 外层容器 */
.keyword-container{
  background: linear-gradient(#ea537e, #e82e3b);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
 }

上部を除去すると、その跳ね返りを確実にするためときにソフトキーボードなので、可視領域のテキストボックスこと、（ソフトキーボード画像が上からのものである）ページソフトキーボードの下部に配置されています^_^。

• の効果を解決した後：
  

あなたにこの記事が参考にした場合、私はそれを賞賛与える、ありがとう^_〜