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

Hintergrundbildzittern auf Mobilgeräten Chrome

Bei der Entwicklung einer responsiven Website mit einem Vollbild-Hintergrundbild, das auf Mobilgeräten, Tablets und anderen Geräten übergeht Auf dem Desktop wurde beobachtet, dass der Hintergrund leicht springt, wenn die Adressleiste in iOS-/Android-Browsern oder Chrome auf Android ausgeblendet wird.

Das Problem ergibt sich aus den CSS-Eigenschaften des Hintergrundbilds, zu denen die Einstellungen „fixed“ und „cover“ gehören. Wenn die Adressleiste verschwindet, ändert sich die Höhe des Hintergrund-Divs, da es auf 100 % Höhe eingestellt ist. Dies wirkt sich wiederum auf das Hintergrundbild aus und führt dazu, dass es seine Größe und Position an die neue Containergröße anpasst.

Um dieses Problem zu beheben, werden zwei Lösungen vorgeschlagen:

Lösung 1: CSS-VH-Einheit verwenden (nicht empfohlen)

Wenn Sie die Höhe des Hintergrund-Divs auf 100 VH festlegen, bleibt das gewünschte Verhalten erhalten. Es gibt jedoch einen bekannten VH-Fehler in iOS, der zu Inkonsistenzen bei den Maßeinheiten der Ansichtsfenster führt. Versuche, dieses Problem mit max-height oder anderen Problemumgehungen zu mildern, waren erfolglos.

Lösung 2: Verwenden Sie Javascript, um die Höhe basierend auf der Größe des Ansichtsfensters festzulegen

Javascript bietet eine weitere Lösung zuverlässiger Ansatz, da er von der Größenänderung der URL-Leiste nicht beeinflusst wird. Durch die Bestimmung der Größe des Ansichtsfensters und die entsprechende Einstellung der Höhe des Hintergrund-Divs bleibt das Bild unabhängig von der Sichtbarkeit der Adressleiste statisch.

Hier ist das Javascript-Skript:

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

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

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

Zusätzliche Anpassung:

Während das Javascript-Skript das Problem mit der Größenänderung des Hintergrunds behebt, kann es beim Herunterscrollen zu einer spürbaren Lücke kommen. Dies kann durch Hinzufügen eines kleinen Versatzes zur Hintergrundhöhenberechnung behoben werden, wodurch die potenzielle Lücke effektiv ausgeblendet wird.

function resizeBackground() {
    bg.height( $(window).height() + 60); // Add 60px to compensate for gap
}

Das obige ist der detaillierte Inhalt vonWarum zittert 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!