モバイル ブラウザでアドレス バーが非表示になるのを防ぐにはどうすればよいですか?

モバイル ブラウザで表示されるアドレス バーを維持する

水平レイアウトの Web サイトを設計する場合、開発者はアドレス バーが自動的に表示される問題に遭遇することがよくあります。スクロールすると非表示になります。これにより、コンテンツ ボックス内の垂直スクロールが中断され、不要なウィンドウ サイズ変更イベントがトリガーされる可能性があります。この問題に対処するには、さまざまなデバイス間でこの自動非表示メカニズムを無効にする解決策が求められます。

解決策:

次の CSS コードは、アドレス バーの表示を効果的に防止します。 auto-hiding:

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

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

説明:

• HTML 要素の overflow: hidden プロパティにより、スクロールが完全に無効になります。
• body 要素のposition:fixed プロパティにより、ボディの位置がビューポート内で固定されたままになり、ウィンドウのサイズ変更イベントが不要になります。
• overflow-y:scroll プロパティにより、ボディ内の垂直スクロールが有効になります。
• -webkit-overflow-scrolling: touch プロパティは、iOS デバイスのスクロール パフォーマンスを最適化します。

デモ:

次の例は、ソリューションの影響を示しています。

• 解決策なし: http://maxeffenberger.de/test.html (スクロール不可)
• 解決策あり: http ://maxeffenberger.de/test2.html (水平方向および垂直方向にスクロール可能)

この CSS コードを実装することで、開発者はアドレス バーが自動的に非表示になるのを防ぎ、モバイル ブラウザーでのシームレスなスクロール エクスペリエンスを保証できます。

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