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!')
})

Oh, interesting! I never tested that 😅. I'll see if I can come up with anything, thanks for mentioning that! Maybe posting in the StackOverflow link might help give it more exposure.

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