如何在 JavaScript 中检测浏览器缩放变化？

在 JavaScript 中检测浏览器缩放事件

JavaScript 缺乏检测浏览器缩放变化的直接方法，这使得响应此类事件具有挑战性。但是，有一些利用间接技术的解决方法。

一种方法涉及在缩放期间利用基于百分比的值的行为。由于无论缩放级别如何，百分比值都保持一致，因此您可以比较以百分比和像素定义的元素的位置。如果位置不同，则表明缩放发生变化。此技术可以如以下代码所示来实现：

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

或者，您可以采用响应中引用的 Stack Overflow 帖子中讨论的方法：

• 页面缩放检测技术： https://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3

需要注意的是，这些技术可能具有不同的可靠性不同的浏览器。此外，无法检测在加载页面之前发生的缩放更改。

以上是如何在 JavaScript 中检测浏览器缩放变化？的详细内容。更多信息请关注PHP中文网其他相关文章！