Full Disclosure: This problem has its roots in CSS, though I am controlling a CSS property with Javascript.
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.
Full Disclosure: This problem has its roots in CSS, though I am controlling a CSS property with Javascript.
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)?
Found out the answer, sort of... not the answer I was hoping for. On Twitter, I asked @ppk:
And he replied:
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.
For more background, this blog post explains why I started thinking down this path... Font-size controls are relevant again...