モバイルエッジブラウザのソフトキーボードがポップアップした後、ページスクロールの問題を解決する方法は？

モバイルエッジブラウザソフトキーボードがポップアップし、ページスクロールの問題とソリューションを引き起こします

携帯電話でエッジブラウザを使用する場合、ソフトキーボードが入力ボックスにポップアップすると、ページには迷惑な問題があります。ページの高さは変更されず、特にページコンテンツが画面を超えた場合、予想される効果と矛盾する可能性があります。この記事では、この問題を分析し、解決策を提供します。

問題の簡単な説明：単純なHTMLページ（入力ボックスを含む）では、ソフトキーボードがポップアップした後、ページは視覚領域に一致するように高さを自動的に調整できませんが、元の高さを保持し、スクロールバーとスクリーンコンテンツを超えてスクロールし、ユーザーエクスペリエンスに影響します。

ソリューション1：コンテナを使用してスクロールを制御します

この問題は、CSSスタイルとHTML構造の調整により効果的に解決できます。この方法は、入力ボックスをDivコンテナで包み、ボディのoverflowプロパティをhiddenて、 touch-actionプロパティをnoneに設定します。

HTMLコード：

<div class="frame">
  <input type="text">
</div>

CSSコード：

体 {
  オーバーフロー：隠し;
  タッチアクション：なし;
}

overflow: hiddenボディスクロール、 touch-action: noneさらにはタッチスクロールを禁止します。 .frameコンテナには、入力ボックスが含まれており、入力ボックス領域を正常に表示して対話できるようにします。

ソリューション2：ページの高さを動的に調整します

より簡単な解決策は、ブラウザのウィンドウサイズを使用してイベントを変更し（ resize ）、ページの高さを動的に調整することです。 resizeイベントリスナーでは、ページの高さをvisualviewport.heightに設定して、視覚領域の変更に従ってページの高さが調整されるようにします。これには、JavaScriptの実装が必要です。

ただし、上記のアプローチがあっても、入力ボックス自体などの特別な場合は、スクロールを許可します。入力ボックスをドラッグすると、ページがスクロールされる場合があります。これには、より深い分析とより複雑なソリューションが必要です。

以上がモバイルエッジブラウザのソフトキーボードがポップアップした後、ページスクロールの問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。