アドレス バーが非表示になると、モバイル Chrome で全画面の背景画像がジャンプするのはなぜですか?

iOS/Android/モバイル Chrome で非表示にするアドレス バーの背景画像のオフセット

問題

CSS を使用してレスポンシブ Web サイトを開発する場合、完全な- 画面の背景画像が 2 つの div 間で回転およびフェードする場合、予期しない動作が発生します。iOS Safari、Android で下にスクロールすると、背景画像がわずかにジャンプします。ブラウザ、または Android Chrome。これは、アドレス バーが非表示になり、その結果として背景 div のサイズが調整されることが原因であり、背景 div は固定され、100% の高さに設定されます。

解決策

この問題を解決するには、2 つの解決策が考えられます。 :

1. #bg1 と #bg2 の高さを次のように設定します100vh: このソリューションは理論的にはエレガントで、ビューポートの高さを使用して適切な高さを設定します。ただし、iOS には、この解決策に影響する vh バグがあります。
2. JavaScript を使用して静的な高さを設定します: ビューポート サイズは、JavaScript によって決定される場合、アドレス バーの影響を受けません。したがって、JavaScript はビューポートのサイズに基づいて背景 div の静的な高さを設定できます。これは、非純粋な CSS の性質とページ読み込み時のわずかな画像ジャンプのため、理想的な解決策ではありませんが、iOS の vh バグを考慮すると実行可能です。

次の JavaScript コードを使用すると、背景が調整されます。高さを動的に:

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

追加の考慮事項

上記の解決策は背景を効果的に防止しますが、サイズを変更すると、ユーザーが下にスクロールしたときに目に見える隙間が生じる可能性があります。このギャップは、背景の高さを画面から URL バーの高さを引いたものに一致させることによって生じます。高さに 60 ピクセルを追加すると、この問題は解決できますが、URL バーが存在する場合、背景画像の下の 60 ピクセルが表示されなくなります。

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

これらのサイズ変更は注意する価値があります。 iOS と Android の URL バーは、Web サイトの機能への影響により懸念を引き起こしています。その目的は理解されていますが、その動作は CSS ベースのデザインで予期せぬ問題を引き起こす可能性があります。

以上がアドレス バーが非表示になると、モバイル Chrome で全画面の背景画像がジャンプするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。