Comment empêcher les éléments fixes de se redimensionner lors du zoom sur l'écran tactile ?

Empêcher le redimensionnement des éléments lors du zoom sur l'écran tactile

Dans le domaine du développement Web, les éléments fixes fournissent un point d'ancrage pour le contenu important, restant stationnaires au milieu du mouvement de défilement. Cependant, lorsqu'ils sont visualisés sur des appareils à écran tactile, ces éléments succombent souvent au geste de pincement pour zoomer, s'agrandissant par inadvertance avec d'autres contenus.

Pour résoudre ce dilemme, il est crucial d'empêcher des éléments spécifiques d'être redimensionnés pendant le zoom. tout en conservant leurs dimensions d'origine. Voici comment y parvenir :

Recalculer le facteur de zoom et appliquer la transformation :

1. Implémenter un écouteur d'événement de défilement pour suivre les interactions des utilisateurs.
2. Calculez le facteur de zoom en utilisant le rapport entre innerWidth et clientWidth. Cette valeur représente l'étendue du zoom.
3. Définissez la propriété CSS "transform" de l'élément ciblé sur "scale(zoomFactor)." Cela redimensionne l'élément pour contrecarrer le zoom du navigateur.

Ajuster la position de l'élément :

1. Étant donné que le zoom modifie la position de l'élément, de nouvelles valeurs pour son " Les propriétés left" et "bottom" doivent être définies.

2. Par exemple, pour un élément positionné de manière absolue dans un parent de 100 % de hauteur, utilisez ces valeurs :

   • " left": window.pageXOffset 'px'
   • "bottom": document.documentElement.clientHeight - (window.pageYOffset window.innerHeight) 'px'

Considérez Transform-Origin :

1. La propriété "transform-origin" détermine le point d'ancrage pour la mise à l'échelle.
2. Expérimentez avec différentes valeurs pour obtenir l'alignement souhaité effet lors du zoom.

En mettant en œuvre ces étapes, vous pouvez efficacement empêcher les éléments fixes de se redimensionner pendant le zoom, garantissant ainsi une expérience utilisateur optimale et une application Web visuellement cohérente.

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!