Wie kann ich Browser-Zoomänderungen in JavaScript erkennen?

Browser-Zoom-Ereignisse in JavaScript erkennen

JavaScript verfügt nicht über eine direkte Methode zur Erkennung von Browser-Zoom-Änderungen, was es schwierig macht, auf solche Ereignisse zu reagieren. Es gibt jedoch Workarounds, die indirekte Techniken nutzen.

Ein Ansatz besteht darin, das Verhalten prozentualer Werte beim Zoomen auszunutzen. Da Prozentwerte unabhängig von der Zoomstufe konsistent bleiben, können Sie die Positionen von Elementen vergleichen, die in Prozentsätzen und Pixeln definiert sind. Wenn die Positionen voneinander abweichen, deutet dies auf eine Zoomänderung hin. Diese Technik kann wie im folgenden Code gezeigt implementiert werden:

// 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
    }
});

Alternativ können Sie die Methoden verwenden, die im Stapelüberlauf-Beitrag besprochen werden, auf den in der Antwort verwiesen wird:

• Techniken zur Seitenzoom-Erkennung: https://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

Es ist wichtig zu beachten, dass diese Techniken möglicherweise unterschiedliche Zuverlässigkeit aufweisen verschiedene Browser. Darüber hinaus ist es nicht möglich, Zoomänderungen zu erkennen, die vor dem Laden der Seite vorgenommen wurden.

Das obige ist der detaillierte Inhalt vonWie kann ich Browser-Zoomänderungen in JavaScript erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!