Hintergrundbildversatz in der Adressleiste wird in iOS/Android/Mobile Chrome ausgeblendet

Problem

Bei der Entwicklung einer responsiven Website mit CSS, einschlie?lich einer vollst?ndigen -Bildschirmhintergrundbild, das zwischen zwei Divs rotiert und verblasst, tritt ein unerwartetes Verhalten auf: Das Hintergrundbild springt leicht, wenn in iOS Safari, Android Browser oder Android nach unten gescrollt wird Chrom. Dies wird dadurch verursacht, dass die Adressleiste die Hintergrund-Divs ausblendet und folglich deren Gr??e anpasst. Diese sind fest und auf 100 % H?he eingestellt.

L?sung

Um dieses Problem zu beheben, gibt es zwei m?gliche L?sungen :

1. Setzen Sie die H?he von #bg1 und #bg2 auf 100vh: Diese L?sung ist Theoretisch ist es elegant, die H?he des Ansichtsfensters zu verwenden, um die entsprechende H?he festzulegen. Allerdings weist iOS einen VH-Fehler auf, der diese L?sung betrifft.
2. Verwenden Sie JavaScript, um eine statische H?he festzulegen: Die Gr??e des Ansichtsfensters wird, wenn sie von JavaScript bestimmt wird, von der Adressleiste nicht beeinflusst. Somit kann JavaScript eine statische H?he für die Hintergrund-Divs basierend auf der Gr??e des Ansichtsfensters festlegen. Dies ist aufgrund seiner nicht reinen CSS-Natur und eines leichten Bildsprungs beim Laden der Seite keine ideale L?sung, aber angesichts der VH-Fehler von iOS ist es machbar.

Mit dem folgenden JavaScript-Code wird der Hintergrund angepasst H?he dynamisch:

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

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

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

Zus?tzliche überlegungen

W?hrend die obige L?sung die Gr??en?nderung des Hintergrunds effektiv verhindert, kann es zu a kommen spürbare Lücke, wenn Benutzer nach unten scrollen. Diese Lücke ergibt sich aus der Anpassung der Hintergrundh?he an den Bildschirm abzüglich der H?he der URL-Leiste. Durch Hinzufügen von 60 Pixeln zur H?he kann dieses Problem behoben werden. Dies bedeutet jedoch, dass die unteren 60 Pixel des Hintergrundbilds nicht sichtbar sind, wenn die URL-Leiste vorhanden ist:

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

Es ist erw?hnenswert, dass diese Gr??en?nderungen vorgenommen werden URL-Leisten in iOS und Android haben aufgrund ihrer Auswirkungen auf die Website-Funktionalit?t Anlass zur Sorge gegeben. Obwohl ihr Zweck bekannt ist, kann ihr Verhalten bei CSS-basierten Designs zu unerwarteten Herausforderungen führen.

Das obige ist der detaillierte Inhalt vonWarum springt mein Vollbild-Hintergrundbild in Mobile Chrome, wenn die Adressleiste ausgeblendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!