Maison  >  Article  >  interface Web  >  Comment empêcher le redimensionnement des éléments fixes lors du zoom sur l'écran tactile ?

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

DDD
DDDoriginal
2024-10-30 16:53:02214parcourir

How to Prevent Fixed Element Resizing During Touchscreen Zooming?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn