Comment puis-je empêcher la barre d'adresse de se cacher dans les navigateurs mobiles ?

Préserver la barre d'adresse visible dans les navigateurs mobiles

Lors de la conception d'un site Web avec une mise en page horizontale, les développeurs rencontrent souvent automatiquement le problème de la barre d'adresse se cacher lors du défilement. Cela peut perturber le défilement vertical dans les zones de contenu et déclencher des événements de redimensionnement de fenêtre indésirables. Pour résoudre ce problème, une solution est recherchée qui désactive ce mécanisme de masquage automatique sur divers appareils.

Solution :

Le code CSS suivant empêche efficacement la barre d'adresse de masquage automatique :

<code class="css">html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}</code>

Explication :

• Débordement de l'élément html : la propriété cachée désactive complètement le défilement.
• L'élément body position : la propriété fixe garantit que la position du corps reste fixe dans la fenêtre, éliminant ainsi le besoin de redimensionner la fenêtre événements.
• La propriété overflow-y: scroll permet le défilement vertical dans le corps.
• La propriété -webkit-overflow-scrolling: touch optimise les performances de défilement sur les appareils iOS.

Démonstration :

Les exemples suivants illustrent l'impact du solution :

• Sans la solution : http://maxeffenberger.de/test.html (non déroulant)
• Avec la solution : http://maxeffenberger.de/test2.html (défilement horizontal et vertical)

Par En mettant en œuvre ce code CSS, les développeurs peuvent empêcher le masquage automatique de la barre d'adresse et garantir des expériences de défilement transparentes dans les navigateurs mobiles.

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!