モバイル Chrome で全画面の背景画像がジャンプするのはなぜですか?どうすれば修正できますか?

モバイル Chrome の背景画像オフセットの問題

レスポンシブ Web デザインでは、サイズ変更やスムーズな遷移が可能な全画面背景画像を使用するのが一般的です。ただし、開発者は、iOS Safari、Android ブラウザ、または Android の Chrome で下にスクロールするとアドレス バーが非表示になると、背景が突然飛ぶという問題によく遭遇します。

問題の原因

この問題は、背景サイズの値が「cover」で固定高の背景 div を使用するときに発生します。アドレス バーが縮小すると、背景 div の高さが変化し、利用可能な領域をカバーするように画像のサイズと位置が再調整されます。

解決策 1: #bg1 と #bg2 の高さを 100vh に設定する

背景の div 高さを 100vh (ビューポートの高さ) に設定しようとすると、次のようになります。エレガントなソリューションですが、iOS にはこのアプローチが確実に動作することを妨げる vh バグがあります。

解決策 2: Javascript を使用して静的高さを設定する

ビューポート サイズは次のように決定されるため、 Javascript は URL バーの影響を受けません。JavaScript を使用して、ビューポート サイズに基づいて背景 div の静的な高さを設定できます。これは理想的な解決策ではありませんが、背景画像のサイズ変更を効果的に防ぐことができます。

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

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

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

追加メモ

この問題は次の原因で発生することに注意することが重要です。 iOS および Android プラットフォームのアドレス バーのサイズ変更。これらのブラウザの最新の変更により、スクロール トリックを使用してページの読み込み時に URL バーが非表示になることが防止されます。

スクロール ギャップの解決

上記のスクリプトは、背景の表示を効果的に防止します。サイズ変更は可能ですが、ユーザーが下にスクロールすると顕著な隙間が生じる可能性があります。これに対処するには、背景の高さに 60 ピクセルを追加します:

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

この変更によりギャップは防止されますが、URL バーが存在する場合、背景画像の下 60 ピクセルが非表示になる可能性があります。

以上がモバイル Chrome で全画面の背景画像がジャンプするのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。