Grow your CSS skills. Land your dream job.

Best way to resize/zoom a RWD site

  • # February 11, 2013 at 1:04 pm

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

    # February 11, 2013 at 2:12 pm

    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”)

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".