Pourquoi mon image d'arrière-plan en plein écran saute-t-elle dans Mobile Chrome et comment puis-je y remédier ?

Problème de décalage de l'image d'arrière-plan dans Chrome mobile

Dans la conception Web réactive, il est courant d'utiliser des images d'arrière-plan en plein écran qui se redimensionnent et évoluent en douceur . Cependant, les développeurs rencontrent souvent un problème où l'arrière-plan saute brusquement lorsque la barre d'adresse dans iOS Safari, le navigateur Android ou Chrome sur Android se cache lors du défilement vers le bas.

Cause du problème

Le problème survient lors de l'utilisation de divs d'arrière-plan à hauteur fixe avec une valeur de taille d'arrière-plan de "couverture". À mesure que la barre d'adresse se rétrécit, la hauteur du div d'arrière-plan change, ce qui oblige l'image à réajuster sa taille et sa position pour couvrir la zone disponible.

Solution 1 : définir la hauteur #bg1 et #bg2 sur 100vh.

Essayer de définir la hauteur du div d'arrière-plan sur 100vh (hauteur de la fenêtre d'affichage) semble être une solution élégante, mais iOS a un bug vh qui empêche cette approche de fonctionner de manière fiable.

Solution 2 : Utiliser Javascript pour définir la hauteur statique

Étant donné que la taille de la fenêtre d'affichage déterminée par Javascript n'est pas affectée par dans la barre d'URL, vous pouvez utiliser Javascript pour définir une hauteur statique sur les divs d'arrière-plan en fonction de la taille de la fenêtre d'affichage. Ce n'est pas une solution idéale, mais elle empêche efficacement le redimensionnement de l'image d'arrière-plan :

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

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

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

Notes supplémentaires

Il est important de noter que ce problème est dû à la barre d'adresse de redimensionnement sur les plateformes iOS et Android. Le dernier changement dans ces navigateurs empêche la barre d'URL d'être masquée lors du chargement de la page à l'aide d'astuces de défilement.

Résoudre l'espace de défilement

Le script ci-dessus empêche efficacement l'arrière-plan de redimensionner, mais cela peut provoquer un écart notable lorsque les utilisateurs font défiler vers le bas. Pour résoudre ce problème, ajoutez 60 px à la hauteur de l'arrière-plan :

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

Cette modification empêchera l'espace, mais elle peut entraîner le masquage des 60 px inférieurs de l'image d'arrière-plan lorsque la barre d'URL est présente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!