この質問は以前に尋ねられたことは確かですが、非常に類似したものは見つかりませんでした (わずかに類似した質問がありました)。
モバイル ブラウザーでは、下にスクロールするとアドレス バーが非表示になる傾向があります。これは素晴らしいことですが、私が現在作成しているレスポンシブ Web サイトのように、パーセンテージ ベースの要素の高さに大きく依存する Web サイトには問題があります。
問題は、アドレスバーの可視性に応じてビューポートのサイズが変わることです。つまり、アドレスバーが表示されているときのサイズよりも、非表示のときの 100% の高さが大きくなります。これにより、スクロールすると Web サイトの再構成がぎこちなくなります。これは、ページ内のどこにいても上にスクロールするたびにアドレスバーが戻ってくるため、モバイル Google Chrome で特に問題になります。ぎくしゃくした再構成がたくさん。
100% は、アドレス バーのないブラウザーに関しては 100% を意味します。どのような解決策を講じても、Javascript が必要になりますが、この情報を取得する方法が見つからないようです。頭に浮かぶオプションの 1 つは画面の高さですが、これは、モバイル OS の通知バーやその他の永続的なブラウザー UI 要素が考慮されないことを意味します。だから私はそれが最初のステップだと思います.次のステップは、この高さをパーセンテージベースの高さ要素のすべてに導入する最も雄弁な方法を見つけることです.ただし、サイズ変更イベントで大量の要素の再調整を行う必要はありません)。
回答は大歓迎です。