Comment puis-je détecter les changements de zoom du navigateur en JavaScript ?

Détection des événements de zoom du navigateur en JavaScript

JavaScript ne dispose pas d'une méthode directe pour détecter les modifications du zoom du navigateur, ce qui rend difficile la réponse à de tels événements. Cependant, il existe des solutions de contournement qui utilisent des techniques indirectes.

Une approche consiste à exploiter le comportement des valeurs basées sur un pourcentage lors du zoom. Étant donné que les valeurs en pourcentage restent cohérentes quel que soit le niveau de zoom, vous pouvez comparer les positions des éléments définis en pourcentages et en pixels. Si les positions divergent, cela indique un changement de zoom. Cette technique peut être implémentée comme démontré dans le code suivant :

// Define elements with percentage and pixel positions
const percentageElement = document.getElementById("percentage");
const pixelElement = document.getElementById("pixel");

// Calculate their position ratio
const initRatio = percentageElement.offsetWidth / pixelElement.offsetWidth;

// Event Listener for window resize (includes zoom)
window.addEventListener("resize", (event) => {
    // Calculate the new ratio
    const newRatio = percentageElement.offsetWidth / pixelElement.offsetWidth;

    // Check for zoom change if ratio has changed
    if (newRatio !== initRatio) {
        // Perform desired actions upon zoom change
    }
});

Vous pouvez également utiliser les méthodes décrites dans l'article Stack Overflow référencé dans la réponse :

• Techniques de détection de zoom de page : https://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

Il est important de notez que ces techniques peuvent avoir une fiabilité variable selon les différents navigateurs. De plus, il n'est pas possible de détecter les changements de zoom survenus avant le chargement de la page.

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!