Comment empêcher les éléments fixes de se redimensionner pendant le zoom de l'écran tactile ?

Maintenir la taille des éléments fixes lors du zoom sur l'écran tactile

Les appareils mobiles équipés d'écrans tactiles posent un défi unique pour les éléments fixes des pages Web. Lorsque les utilisateurs pincent l'écran pour zoomer, les éléments fixes ont tendance à se redimensionner avec le reste du contenu, obscurcissant potentiellement les éléments sous-jacents.

Pour éviter ce comportement, nous pouvons utiliser une technique qui calcule le facteur de zoom actuel et applique une transformation CSS3 appropriée à l'élément fixe, garantissant qu'il reste de la même taille à tout moment.

<code class="javascript">window.addEventListener('scroll', function(e) {
    var zoom = window.innerWidth / document.documentElement.clientWidth;
    el.style["transform"] = "scale(" + zoom + ")";
});</code>

Cette logique calcule le facteur de zoom et l'applique comme une transformation d'échelle. Cependant, étant donné que la position de l'élément fixe peut devenir inexacte, nous l'ajustons à l'aide d'un positionnement absolu :

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

Positionner l'élément fixe dans un élément parent à hauteur de contenu de 100 % et ajuster sa position en fonction des dimensions de la fenêtre d'affichage garantit qu'il reste visible à l'emplacement souhaité, quel que soit le niveau de zoom.

Faites attention à la propriété transform-origin si vous devez contrôler le point d'ancrage de mise à l'échelle pour l'élément fixe. En utilisant cette technique, vous pouvez créer des éléments qui conservent leur taille lors des événements de zoom sur l'écran tactile, améliorant ainsi l'expérience utilisateur sur les appareils 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!