Il n'est pas rare que des sites Web avec des mises en page non conventionnelles soient confrontés à des problèmes avec le mécanisme de masquage automatique de la barre d'adresse dans les navigateurs mobiles. Cela peut perturber les fonctionnalités et créer des expériences utilisateur involontaires.
Problème :
Les sites Web qui s'appuient fortement sur un positionnement absolu avec JavaScript pour leur mise en page horizontale rencontrent souvent le problème du défilement involontaire. . Bien que les éléments se trouvent dans la hauteur de la fenêtre, la barre d'adresse reste masquée, déclenchant une série d'événements indésirables :
Solution :
Pour éviter ce comportement de masquage automatique, une combinaison de propriétés CSS peut être utilisée :
Code CSS :
<code class="css">html { background-color: red; overflow: hidden; width: 100%; } body { height: 100%; position: fixed; /* prevent overscroll bounce*/ background-color: lightgreen; overflow-y: scroll; -webkit-overflow-scrolling: touch; /* iOS velocity scrolling */ }</code>
Explication :
Cette solution verrouille efficacement la barre d'adresse dans son état développé, permettant aux utilisateurs de faire défiler les zones de contenu souhaitées sans déclencher d'événements indésirables ni perturber la disposition visuelle.
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!