Checks if window has been zoomed.

window-zoom.js

// modified from https://stackoverflow.com/a/52008131/1461204
const zoomEvent = new Event('zoom')
let currentRatio = window.devicePixelRatio

function checkZooming() {
  if (currentRatio !== window.devicePixelRatio) {
    window.dispatchEvent(zoomEvent)
  }
}

window.addEventListener('resize', checkZooming)

// usage
window.addEventListener('zoom', () => {
  console.log('zoomed!')
})

This is fantastic, but have you any idea how it could be adapted to also detect a 'zoom reset' event (Ctrl+0) ?
It seems like removing the if check at line 6 works, but I suspect this means we are no longer ignoring window resize events. Maybe there is some way to distinguish a resize and a reset...

You can do so replacing the currentRatio variable value each time event is triggered:
`const zoomEvent = new Event('zoom')
let currentRatio = window.devicePixelRatio

function checkZooming() {
if (currentRatio !== window.devicePixelRatio) {
currentRatio = window.devicePixelRatio
window.dispatchEvent(zoomEvent)
}
}

window.addEventListener('resize', checkZooming)

// usage
window.addEventListener('zoom', () => {
console.log('zoomed!')
})`

For anyone that's interested I found out you can use a ResizeObserver and it will update whenever the viewport is zoomed 🎉

Be aware that https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver is not compatible with Safari and IE

@megasent1 thanks! I should have mentioned that, my bad. Here's a link to a Resize Observer polyfill if anyone needs it. Can confirm it works in Safari.

Be aware that https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver is not compatible with Safari and IE

It is now