Catch browser's “zoom” event in JavaScript

Question

Is it possible to detect, using JavaScript, when the user changes the zoom in a page? I simply want to catch a \"zoom\" event and respond to it (similar to window.onresize e

Answer 1

There is a nifty plugin built from yonran that can do the detection. Here is his previously answered question on StackOverflow. It works for most of the browsers. Application is as simple as this:

window.onresize = function onresize() {
  var r = DetectZoom.ratios();
  zoomLevel.innerHTML =
    "Zoom level: " + r.zoom +
    (r.zoom !== r.devicePxPerCssPx
        ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx
        : "");
}

Demo