Warum springt mein Vollbild-Hintergrundbild in Mobile Chrome und wie kann ich das beheben?

Hintergrundbild-Offset-Problem in Mobile Chrome

Im responsiven Webdesign ist es üblich, Hintergrundbilder im Vollbildmodus zu verwenden, deren Größe sich ändert und deren Übergang reibungslos verläuft . Entwickler stoßen jedoch häufig auf ein Problem, bei dem der Hintergrund abrupt springt, wenn die Adressleiste in iOS Safari, im Android-Browser oder in Chrome auf Android beim Herunterscrollen ausgeblendet wird.

Ursache des Problems

Das Problem tritt auf, wenn Hintergrund-Divs mit fester Höhe und einem Hintergrundgrößenwert von „cover“ verwendet werden. Wenn die Adressleiste kleiner wird, ändert sich die Höhe des Hintergrund-Divs, wodurch das Bild seine Größe und Position neu anpasst, um den verfügbaren Bereich abzudecken.

Lösung 1: #bg1- und #bg2-Höhe auf 100vh setzen

Der Versuch, die Hintergrund-Div-Höhe auf 100 VH (Ansichtsfensterhöhe) festzulegen, scheint eine elegante Lösung zu sein. aber iOS hat einen VH-Fehler, der verhindert, dass dieser Ansatz zuverlässig funktioniert.

Lösung 2: Verwenden von Javascript zum Festlegen der statischen Höhe

Da die durch Javascript bestimmte Größe des Ansichtsfensters davon nicht betroffen ist In der URL-Leiste können Sie mithilfe von Javascript eine statische Höhe für die Hintergrund-Divs basierend auf der Größe des Ansichtsfensters festlegen. Dies ist keine ideale Lösung, verhindert aber effektiv, dass sich die Größe des Hintergrundbilds ändert:

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

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

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

Zusätzliche Hinweise

Es ist wichtig zu beachten, dass dieses Problem verursacht wird durch die Größenänderung der Adressleiste auf iOS- und Android-Plattformen. Die neueste Änderung in diesen Browsern verhindert, dass die URL-Leiste beim Laden der Seite mithilfe von Scroll-Tricks ausgeblendet wird.

Behebung der Scroll-Lücke

Das obige Skript verhindert effektiv, dass der Hintergrund angezeigt wird Die Größenänderung kann jedoch zu einer spürbaren Lücke führen, wenn Benutzer nach unten scrollen. Um dieses Problem zu beheben, fügen Sie 60 Pixel zur Hintergrundhöhe hinzu:

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

Diese Änderung verhindert die Lücke, kann jedoch dazu führen, dass die unteren 60 Pixel des Hintergrundbilds ausgeblendet werden, wenn die URL-Leiste vorhanden ist.

Das obige ist der detaillierte Inhalt vonWarum springt mein Vollbild-Hintergrundbild in Mobile Chrome und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!