Comment empêcher le redimensionnement des éléments fixes lors du zoom sur l'écran tactile ?

Comment résoudre le problème de redimensionnement d'un élément fixe lors du zoom sur des appareils à écran tactile

Dans le développement Web, il est essentiel de maintenir la cohérence de éléments quelle que soit l’interaction de l’utilisateur. Cependant, lorsque vous travaillez avec des éléments fixes sur des écrans tactiles, le zoom peut entraîner des problèmes de redimensionnement inattendus.

Considérez cet extrait de code :

<code class="html"><div id="fixed">
  <p>Some content</p>
</div></code>

<code class="css">#fixed {
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}</code>

Sur les écrans tactiles, lorsqu'un utilisateur pince pour zoomer , l'élément fixe, ainsi que le reste du contenu, évolue. Cependant, avec un zoom excessif, l'élément peut devenir surdimensionné et chevaucher d'autres contenus. Pour résoudre ce problème, nous devons empêcher notre élément fixe de se redimensionner lors des événements de zoom.

La solution réside dans le recalcul de l'échelle et de la position de l'élément en fonction du niveau de zoom de l'utilisateur. Nous pouvons y parvenir en mettant continuellement à jour la transformation CSS et la position de l'élément lors des événements de défilement :

<code class="javascript">window.addEventListener('scroll', function(e) {
  // Calculate the zoom factor.
  var zoom = window.innerWidth / document.documentElement.clientWidth;

  // Apply the zoom factor as a CSS3 transform.
  el.style["transform"] = "scale(" + zoom + ")";
});</code>

<code class="javascript">// Reset the element's position.
el.style.left = window.pageXOffset + 'px';
el.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';</code>

Cette approche redimensionne efficacement l'élément à sa taille d'origine et ajuste sa position en conséquence, quel que soit le zoom. niveau.

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!