How to detect page zoom level in all modern browsers?

Question

1. How can I detect the page zoom level in all modern browsers? While this thread tells how to do it in IE7 and IE8, I can\'t find a good cross-browser solution.

Answer 1

Basically, we have:

• window.devicePixelRatio which takes into account both browser-level zoom* as well as system zoom/pixel density.
  * — on Mac/Safari zoom level is not taken into account
• media queries
• vw/vh CSS units
• resize event, which is triggered upon zoom level change, cause effective size of the window changes

that should be enough for normal UX. If you need to detect zoom level that might be a sign of bad UI design.

Pitch-zoom is harder to track and is not considered currently.