モバイルでアドレス バーが非表示になると、レスポンシブ Web サイトの背景画像がジャンプするのはなぜですか?

iOS/Android/Chrome モバイルでアドレス バーが非表示になると背景画像がジャンプする

Twitter Bootstrap を使用しているレスポンシブ Web サイトでは、背景が表示されないという問題が頻繁に発生します。 iOS Safari、Android ブラウザ、または Android 版 Chrome でスクロールすると、画像が移動またはジャンプします。これは、アドレス バーのサイズ変更と、背景画像コンテナ div のサイズ変更が原因で発生します。

原因と解決策

原因は、固定高さ ( 100%) と背景サイズ: 背景 div をカバーします。アドレス バーが縮小すると、含まれている要素の高さが変更され、背景画像のサイズと位置が変更されます。

考えられる解決策の 1 つは、背景 div の高さを 100vh (ビューポートの高さ) に設定することです。ただし、iOS には、このアプローチが一貫して機能することを妨げる vh バグがあります。

あるいは、より信頼性の高い解決策として、JavaScript を使用して、ビューポート サイズに基づいて背景 div の静的な高さを設定する方法があります。このアプローチにより、バグのある動作が回避され、スクロール中の画像のジャンプが防止されます。次のコードは、この解決策を示しています:

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

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

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

ただし、この方法では、下にスクロールするときにギャップが生じる可能性があります。これを軽減するには、swiss が提案しているように、高さに 60 ピクセルのバッファを追加することをお勧めします。

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

この解決策では、アドレス バーが存在するときに一部の背景コンテンツの可視性が犠牲になりますが、ユーザーがスクロール中にギャップや不一致が発生するのを防ぎます。

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