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

モバイル ブラウザでのアドレス バーの非表示を防ぐ

開発者は、Web サイトを下にスクロールすると、アドレス バーが自動的に非表示になる問題によく遭遇します。要素がウィンドウの高さを超えないこと。これにより、不要なイベントがトリガーされ、特定のコンテンツ ボックスが妨げられる可能性があります。

このアドレス バーの自動非表示メカニズムを防ぐには、CSS プロパティを含むソリューションを実装できます。

<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 要素が非表示のオーバーフローと固定幅を持つように設定されます。 body 要素は固定位置に配置され、垂直スクロールが有効になります。 iOS デバイスでのスクロール エクスペリエンスを最適化するために、-webkit-overflow-scrolling プロパティは touch に設定されています。

この CSS ソリューションを実装することにより、アドレス バーは常に表示されたままになり、自動的に非表示になるのを防ぎます。横型レイアウトの Web サイトを下にスクロールするとき。

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