Looking At How Browser Zoom Affects CSS Media Queries And Pixel-Density
The older I get, the more zoomed-in my browser tends to become. I just don't have the patience for small-text - I want my font-sizes to feel luxurious and decadent. The other day, however, I needed to take a screen-shot of some graphs in Datadog; so I ended up zooming in even more than I normally do. And, as I did so, I noticed that the grid-layout of my graphs changed in column-count. This got me thinking about what the zoom feature of the browser is actually doing; and, how it affects values like screen size and pixel density. I have no current mental model for this. So, I wanted to set up some "resize" and Media Query "change" event listeners to see how the browser reacts when I start zooming in.
I honestly never thought about what is actually happening when I use the browser's zoom feature. I just know that things get larger and easier to read. To get a better sense of what's actually going on under the hood, I wanted to look at the following:
CSS Media queries - how does the zoom affect things like
Resize Events - does the browser consider the zoom event to be a window
Pixel density - when I zoom in, does the browser try to mimic a higher-density screen resolution?
Going into this experiment, I knew that I could create CSS media queries to change the visual state of the document based on the screen size; but, as I was researching this, I came across the fact that you can programmatically check the state of a media query using the
window.matchMedia() method. The
window.matchMedia() method allows you to pass in CSS media query text and get back an object -
MediaQueryList - that can tell us the current state of the media query as well as let us subscribe to changes in said media query state.
Bringing all of this together, I created a small demo in which the background-color of the browser starts out dark. And then, using CSS media queries, as the screen size gets larger, the background-color gets lighter. In addition to the CSS media queries, I'm also registering a
resize event handler. And, individual
change event handlers for each media query that I have defined in the stylesheet:
In this demo, we are logging three things:
- The initial state of the
changeevent on the
resizeevent on the
And, if we open the demo up using a screen size that is larger than the largest media query, the browsers starts out as black-text on a white-background. And, as we zoom, we get the following:
As you can see, when we zoom into the browser, the console starts logging both the
resize events on the
window and the
change events on our various
MediaQueryList objects. In Chrome and Firefox, the pixel density of the screen (as reported by
window.devicePixelRatio) also starts to increase.
NOTE: On my version of desktop Safari, the
window.devicePixelRatiovalue reports a constant
1regardless of the zoom factor. That said, the
changeevents fire correctly in Safari.
So, my big take-away from this - from a "mental model" perspective - is that as we zoom into the browser, the "size" of the screen decreases. Which means, we can use CSS media queries to adjust to the layout of the screen in response to the decreased amount of screen real estate. I'm also excited to see that I can programmatically check CSS media query state. I don't have a great use-case for that off the top of my head; but, I'm almost certain that such a feature will be useful in the future.
Want to use code from this post? Check out the license.
The zoom level of the operating system settings can also play a role (e.g. Windows 10 at 125% with Google Chrome at 100%) in a website's CSS media queries-- something I discovered not too long ago while troubleshooting an older laptop which was seeing the mobile view of a website instead of the desktop version. Tons of fun, as you can imagine.
Yo, I didn't even know you could zoom at the OS level! I'll have to look into that; though, now that you say it, it does sound like some sort of zoom-inception hell :D
Yep, zooming can be a real pain in various situations, I remember having it with fixed headers. Some safaris, when finger zooming, wouldn't really zoom in...it will just zoom the view part keeping the originals containers width, and then, at a certain point it will zoom. It can break the header and other things. Really painfull. I remember I had to do a hacky fix at that moment.
Yikes. Hopefully the mobile OS's have improved or gotten more consistent. I don't actually have a lot of mobile experience. I'm still trying to get this blog to be mobile friendly. It feels really challenging retrofitting "mobile" into things.
Hello from France
Well done for your program, it works perfectly of course.
I have been looking for a long time how to zoom with an ESP32-cam streaming camera.
It's great on my PC.
But what I would like is to do it on my smartphone, and I have no idea how to embed your program in the browser (Chrome) of my smartphone ...
Do you have an idea please?
I am not sure I understand your question. There's really nothing to "embed" here - I'm just exploring the interaction between Zoom level in the browser and how the CSS media-queries see the screen dimensions.
Ha yes, I'm sorry, I thought it was a possibility of zooming in streaming videos.
thank you all the same
"Operating system zoom" in Windows 10 & 11 is technically known as "Display Scaling." I'm adding this comment so that readers will be able to search for the correct term should they want more information about how Windows 10 and 11 display scaling works.
Thanks for the language tip. This is good to have recorded.
Thanks Ben for your experiment.
It would be also interesting to find if the page is already zoomed (e.g. browser zoom 150% and opening a webpage). I couldn't find an answer to this 😞
You have a highlighted typo, it is window.matchMedia() and not window.mediaMatch() 😉
Thanks for calling out the typo -- consider it fixed. As far as the page being "already zoomed", if you just run the demo, zoom in, and then refresh the page, wouldn't that count? If so, it behaves the same way. Unless I don't understand what you mean by already zoomed.
Very interesting question. I wonder if one could create a media-query that is triggered by the base-font-size of the document? Also, I know some browsers are starting to land "container queries" where you can adjust styling and layout based on the size of a given DOM element container - perhaps that's something you could play around with.
Sorry I don't have anything more concrete. I'm still trying to get better at responsive design in general.