Comment empêcher le masquage de la barre d'adresse dans les navigateurs mobiles avec des dispositions horizontales ?

Adressage pour empêcher le masquage de la barre d'adresse dans les navigateurs mobiles

Lors du développement de sites Web avec une mise en page horizontale, empêcher le masquage automatique de la barre d'adresse dans les navigateurs mobiles devient un problème crucial . La capacité du navigateur à faire défiler le contenu en dessous du contenu réel, déclenchant des événements inutiles et entrant en conflit avec la fonctionnalité de défilement vertical, peut entraîner une expérience utilisateur indésirable. Cet article explore une solution qui résout ce problème spécifique.

Solution proposée

La cause sous-jacente du mécanisme de masquage automatique de la barre d'adresse est la tentative du navigateur d'optimiser l'expérience utilisateur en fournissant plus d'écran. espace pour le contenu. Pour éviter ce comportement, nous pouvons utiliser les règles CSS suivantes :

<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>

Dans cette solution :

• Tag html : Définir le débordement sur masqué empêche tout contenu de déborder de l'élément racine et élimine la barre de défilement en bas.

• balise body :

  • hauteur : 100 % restreint la hauteur à la fenêtre d'affichage de l'appareil, empêchant l'utilisateur de faire défiler verticalement au-delà du contenu.
  • position : fixe fixe la position du corps sur l'écran, garantissant qu'il reste dans la fenêtre d'affichage.
  • -webkit- overflow-scrolling : le toucher permet un défilement fluide sur les appareils iOS.

En implémentant ces règles CSS, le corps devient le seul élément autorisé à défiler, et la zone de la barre d'adresse est effectivement caché. Cette solution empêche tout contenu d'être poussé hors de l'écran et garantit une expérience utilisateur cohérente et optimisée sur différents appareils.

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!