Blog is available in backup mode, go to github-pages for newer posts
Back to articles listRegularly people ask about how to detect browser zoom level, but that's usually a typical example of XY problem. In most cases, a good design should be flexible and shouldn't know about what certain zoom level a person set. In order to implement certain technical aspects in CSS, it should be enough to use relative measurement units: %/em/rem for font-sizes and vh/vw for blocks' dimensions. Having that said, let's dive into types of zooms.
You don't need to know zoom level.
Actually, there are at least three basic types of zoom: system, browser & pitch zoom. Also to ensure we are on the same page, I'd use two broad device classes: computers, which include desktops, laptops disregarding on hardware and OS vendor; and handhelds: phones, tablets, phablets.
This is the most basic thing known to everyone and that's what people ask about. It is usually applicable to desktop browsers. The one which is normally done by holding Ctrl/⌘and pressing +, – or scrolling. But this is only the part of the story.
Trivia: By default, this kind of zoom is 100%, it is preserved across sessions and is scoped to the domain. If you zoom in one tab, all other tabs with the same site will be zoomed as well.
Here it's become more interesting and I'm kind of using my own umbrella term. Basically, it's how OS maps hardware pixels to software pixels almost transparently for apps, including a browser. Let's basically say that Apple devices with Retina™ have 200% (except iPhone 6/6s/7 plus—they have 300%), in Windows 10 it's "Settings / Display / change the size of text, apps, and other items". Older versions of Windows: 8 and 7 have a similar option. You can have different zoom levels for different displays and all browsers support that.
This is the default type of "zoom" for mobile devices. But actually, almost the same thing is available on Macs, it also works in Chrome & Edge (but not in Firefox, AFAIR) on Win laptops with touch screen. It [was] possible to disable it by adding meta-viewport with user-scalable=no and that's all you can do with that. You cannot track it and this isn't the -Droid- feature you're looking for.
How is the system zoom combined with the browser zoom? Basically, they are just multiplied. But if that would be the same for all platform, there would be no this blog post. In Chrome/Firefox 125% system zoom with 125% browser zoom will result in clumsy 156.25%(1.252). But IE/Edge are (surprise-surprise!) better integrated with Windows and they actually snap through multiples of 25% of the zoom level. So instead of going through 125%100%, 125%125%, 125%*150%, they are going through 125%, 150%, 175%... and so on.
somewhere here, begins the part for hardcore perfectionists, obsessed with pixel-perfectness. But you can still read—this doesn't oblige you to actually follow the ideas below. It's safe to continue, trust me.
Ok, you ask: "that's all nice, can I just ~has a cheeseburger~ get combined zoom effect?". It's actually the simplest zoom level to get. This very combined zoom can be considered via resolution media queries. There's still no single way for all browsers, though. On top of that, the total zoom is reflected in the global devicePixelRatio property, which is really a "one ring to rule them all"... or is it? Actually, Mac/Safari works slightly differently, it reflects only system zoom, which is always 2 for most their computers. But unfortunately, that's not an end to their "think different". One [https://support.apple.com/kb/PH25175?locale=en_US](can change their resolution on the Mac). This technically changes system zoom. Unfortunately, the properties we can read inside the browser doesn't reflect that. I.e. neither devicePixelRatio nor media queries matching change.
"But you said, I don't need to know system zoom. Good design should fit that...", well, mostly. There's a case when we might need to know hardware pixel to CSS pixel ratio: pixel hinting.
Even if your images are in vector pixel density-independent format—certain types of graphics, especially icons with fine lines are very sensitive to proper matching of pixel grid. If drawn inaccurately, such kind of art could easily become blurred. A pair of the most prominent examples: text, icons. The latter is about exporting from Illustrator to Photoshop, but technical problem is the same. So the process (manual or automated) of ensuring that graphics nicely fits pixel grid and fixing it is a pixel-hinting. There are various automated algorithms for fonts, but fonts are very specific kind of graphics. In general, there's no universal tool to automate that. Of course, for high-DPI devices, that's less important, because blurriness of unhinted image is never more than one-pixel size, and the less is a single pixel, the less is blurriness. For example, printers had high-DPI for a few decades and nobody cares about hinting when printing—the dots are too small. But on the web, most computers still have low-DPI screens.
But in order to hint properly, we need to know the size of hardware pixel, which on the web means knowing hardware pixel to CSS pixel ratio or total zoom. There are too many possible values to do that manually. Even if we consider 1x-1.5x range. Microsoft did that for their system interface icons, but that's Microsoft. The budget for Windows 10 is hundred millions of dollars, they have not that many icons (less than 100, I suppose) and only a few zoom levels to consider. What to do in the case of a simple site? The baseline is to hint for normal desktops, it will also be crisp for most high-DPI devices, which often have integer CSS pixel to hardware pixel ratio.
If you're still obsessed with quality and have resources to create different versions of hinted SVGs or even pixel-perfect raster images, you can go with 1.5x, 1.25x, then maybe 1.75x.