Warum springt mein Vollbild-Hintergrundbild in Mobile Chrome, wenn die Adressleiste ausgeblendet wird?

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!