Pourquoi l'image d'arrière-plan de mon site Web réactif saute-t-elle lorsque la barre d'adresse se cache sur mobile ?

L'image d'arrière-plan saute lorsque la barre d'adresse se cache sur iOS/Android/Chrome Mobile

Les sites Web réactifs utilisant Twitter Bootstrap rencontrent souvent un problème où l'arrière-plan l'image se déplace ou saute lors du défilement sur iOS Safari, le navigateur Android ou Chrome pour Android. Cela se produit en raison du redimensionnement de la barre d'adresse et de la modification de la taille des divs du conteneur d'image d'arrière-plan.

Causes et solutions

Le coupable réside dans l'utilisation d'une hauteur fixe ( 100 %) et background-size : couverture pour les divs d'arrière-plan. À mesure que la barre d'adresse se rétrécit, elle modifie la hauteur des éléments contenant, provoquant le redimensionnement et le repositionnement de l'image d'arrière-plan.

Une solution potentielle consiste à définir la hauteur des divs d'arrière-plan sur 100vh (hauteur de la fenêtre d'affichage). Cependant, iOS présente un bug vh qui empêche cette approche de fonctionner de manière cohérente.

Alternativement, une solution plus fiable consiste à 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. Cette approche évite le comportement bogué et empêche le saut d’image pendant le défilement. Le code suivant illustre cette solution :

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

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

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

Cependant, cette méthode peut introduire un espace lors du défilement vers le bas. Pour atténuer cela, il est recommandé d'ajouter un buffer de 60px à la hauteur, comme suggéré par swiss :

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

Bien que cette solution sacrifie la visibilité de certains contenus d'arrière-plan lorsque la barre d'adresse est présente, elle empêche les utilisateurs de rencontrer des lacunes ou des incohérences lors du défilement.

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!