Comment pouvez-vous conserver une taille d'élément fixe sur le zoom de l'écran tactile ?

Conserver la taille des éléments sur le zoom de l'écran tactile

Lorsque des éléments fixes sont affichés sur un appareil à écran tactile, un zoom avant ou arrière peut entraîner leur redimensionnement, créant un comportement indésirable. Cela peut perturber la navigation sur le site ou entraîner un chevauchement de contenu.

Une approche pour éviter ce comportement consiste à ajuster dynamiquement l'échelle de l'élément à l'aide de transformations CSS3. En surveillant l'événement de défilement, nous pouvons calculer le facteur de zoom et l'appliquer à l'élément, en gardant sa taille cohérente.

Par exemple, l'extrait de code suivant calcule le facteur de zoom et l'applique comme une transformation d'échelle :

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

Cependant, cet ajustement à lui seul pourrait ne pas être suffisant. Les éléments fixes ont tendance à se comporter différemment sur Safari mobile avec des pages zoomées. Pour compenser, nous pouvons placer l'élément mis à l'échelle absolument dans un élément parent de 100 % de hauteur et ajuster sa position de manière dynamique :

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

En employant ces techniques, nous pouvons efficacement empêcher les éléments fixes de se redimensionner lors d'un zoom sur des appareils à écran tactile. , en veillant à ce qu'ils conservent leur taille et leur visibilité prévues.

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!