When a user has a great browser like Safari or Chrome and they use the command+ to “zoom” the text, what is actually happening?
I ask because if you do this, and refresh the page, media queries get re-evaluated and the layout changes if the increase was significant enough. This is the intended effect that I want to emulate with some user control buttons on the page*.
I have tried to change the “font-size” on the
with JS (all my width/height/font-size units are EM-based) and the page scales great, but the media queries are not re-evaluated. I have done the same with the “zoom” CSS property with similar effects, and again, no media-query re-evaluation.
So what should I be doing to get the page design to scale and the media queries to re-evaluate (on page refresh)?
* The reasoning: With devices like the iPad Mini, it is not always enough to rely on the user’s default font size to get readable text. Even on most smart-phones, changing the default font size is buried in the settings menu, and will apply to every website visited. I would rather give my users the control to effect the current site, and not others.
Found out the answer, sort of… not the answer I was hoping for. On Twitter, I asked @ppk:
> Re: Tale of 2 Viewports part 1: What CSS prop (if any) do browsers use when zooming a website? Doesn’t seem to be font-size or zoom…
And he replied:
> None. It goes wholly outside CSS. The CSS pixels are stretched up by a higher-order process.
So it seems that we can’t have the same re-evaluation-of-the-media-queries effect when zooming font-size as when a user uses the native browser controls. That’s really too bad.