Warum springt das Hintergrundbild meiner responsiven Website, wenn die Adressleiste auf Mobilgeräten ausgeblendet wird?

Hintergrundbild springt, wenn die Adressleiste auf iOS/Android/Chrome Mobile ausgeblendet wird

Responsive Websites, die Twitter Bootstrap verwenden, stoßen häufig auf ein Problem mit dem Hintergrund Bildverschiebungen oder -sprünge beim Scrollen in iOS Safari, Android Browser oder Chrome für Android. Dies geschieht aufgrund der Größenänderung der Adressleiste und der Änderung der Größe der Hintergrundbild-Container-Divs.

Ursachen und Lösungen

Der Übeltäter liegt in der Verwendung einer festen Höhe ( 100 %) und Hintergrundgröße: Abdeckung für die Hintergrund-Divs. Wenn die Adressleiste verkleinert wird, ändert sich die Höhe der enthaltenen Elemente, wodurch sich die Größe und Position des Hintergrundbilds ändert.

Eine mögliche Lösung besteht darin, die Höhe der Hintergrund-Divs auf 100 VH (Ansichtsfensterhöhe) festzulegen. Allerdings weist iOS einen VH-Fehler auf, der verhindert, dass dieser Ansatz konsistent funktioniert.

Alternativ besteht eine zuverlässigere Lösung darin, mithilfe von JavaScript eine statische Höhe für die Hintergrund-Divs basierend auf der Größe des Ansichtsfensters festzulegen. Dieser Ansatz vermeidet fehlerhaftes Verhalten und verhindert das Springen von Bildern beim Scrollen. Der folgende Code demonstriert diese Lösung:

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

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

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

Diese Methode kann jedoch beim Herunterscrollen zu einer Lücke führen. Um dies abzumildern, wird empfohlen, der Höhe einen Puffer von 60 Pixel hinzuzufügen, wie von swiss vorgeschlagen:

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

Während diese Lösung die Sichtbarkeit einiger Hintergrundinhalte beeinträchtigt, wenn die Adressleiste vorhanden ist, verhindert sie Benutzer dass beim Scrollen Lücken oder Inkonsistenzen auftreten.

Das obige ist der detaillierte Inhalt vonWarum springt das Hintergrundbild meiner responsiven Website, wenn die Adressleiste auf Mobilgeräten ausgeblendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!