这是一个很久以前发布的问题，但今天当我在寻找相同的答案“如何检测放大和缩小事件”时，我找不到一个适合所有浏览器的答案。

就像现在一样:对于Firefox/Chrome/IE8和IE9，放大和缩小会触发一个窗口。调整大小事件。 可以使用以下方法捕获:

$(window).resize(function() {
//YOUR CODE.
});

这对我来说在基于webkit的浏览器(Chrome, Safari)中非常有效:

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

但在Firefox中似乎不能正常工作。

这也适用于WebKit:

var zoomLevel = document.width / document.body.clientWidth;

你可以试试

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

这将给你的浏览器缩放百分比水平在非视网膜显示。对于高DPI/视网膜显示器，它将产生不同的值(例如，Chrome和Safari为200,Firefox为140)。

捕获缩放事件，您可以使用

$(window).resize(function() { 
// your code 
});

zoom = ( window.outerWidth - 10 ) / window.innerWidth

这就是你所需要的。

基本上，我们有:

devicepixelratio，它同时考虑了浏览器级别的缩放*以及系统缩放/像素密度。 *在Mac/Safari上不考虑缩放级别 媒体查询 vw/vh CSS单位 缩放级别更改时触发的Resize事件，会导致窗口的有效大小更改

这对于正常的用户体验来说应该足够了。如果你需要检测缩放级别，这可能是糟糕UI设计的标志。

音高变焦更难跟踪，目前还没有考虑。

您的计算仍然是基于一些CSS像素。现在它们在屏幕上的大小不同了。这就是整页缩放的意义所在。

您希望在192dpi设备上的浏览器上发生什么，因此通常在图像中的每个像素中显示四个设备像素?在50%缩放时，这个设备现在在一个设备像素中显示一个图像像素。