Best way to resize/zoom a RWD site

[artinruins]

_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.

[artinruins]

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.

For more background, this blog post explains why I started thinking down this path… [Font-size controls are relevant again…](http://www.projectevolution.com/activity/font-size-controls-are-relevant-again/ “Font-size controls are relevant again”)

[Author]

Posts