絶対位置指定を使用するときに、モバイル ブラウザでアドレス バーが非表示にならないようにするにはどうすればよいですか?

モバイル ブラウザの永続アドレス バーの対処

型破りなレイアウトを持つ Web サイトで、モバイル ブラウザのアドレス バーの自動非表示メカニズムの問題に直面することは珍しくありません。これにより、機能が中断され、意図しないユーザー エクスペリエンスが生じる可能性があります。

問題:

水平レイアウトで JavaScript による絶対位置に大きく依存している Web サイトでは、意図しないスクロールの問題が発生することがよくあります。 。要素がウィンドウの高さの範囲内にあるにもかかわらず、アドレス バーは非表示のままで、一連の望ましくないイベントがトリガーされます:

• 必要のないサイズ変更イベント
• 垂直スクロール可能での不正なスクロール動作content

解決策:

この自動非表示動作を防ぐには、CSS プロパティの組み合わせを利用できます:

CSSコード:

<code class="css">html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}</code>

説明:

• html { オーバーフロー: 非表示; }: ビューポート外でのスクロールを防ぎます。
• body { height: 100%; }: ボディがビューポートの高さ全体を占めるようにします。
• body {position: 固定; }: ボディをビューポートに固定し、スクロールできないようにします。
• body { overflow-y:scroll; }: 本文内の垂直スクロールを有効にします。
• body { -webkit-overflow-scrolling: touch; }: iOS タッチ デバイスのスクロールを最適化します。

このソリューションは、アドレス バーを展開状態で効果的にロックするため、ユーザーは不要なイベントを引き起こしたり、視覚的なレイアウトを中断したりすることなく、目的のコンテンツ領域内をスクロールできます。

以上が絶対位置指定を使用するときに、モバイル ブラウザでアドレス バーが非表示にならないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。