WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Any official clarification on Text-only zoom and RWD?

for

From: Alastair Campbell
Date: Feb 29, 2016 5:50PM

Hi Jonathan,

I think we're in agreement on most thing, I just wasn't sure about this bit:

> The innerWidth will change AND the window.devicePixelRatio will also
> increase. This will cause the text size to increase even when a breakpoint
> has not been reached.


Yes, so testing that on the inspector console, my browser starts with an
innerWidth of 1280, and a devicePixelRatio of 2 (retina screen).
If I zoom in to 200% (cmd and + 6 times), the inner width is 640, and
devicePixelRatio is 4 (2x200%).

However, be careful on the terminology, everything is increasing
proportionally, not just the text. (I think that's what you meant, but it
one of those things that is easy to mistake.)


> So browser zoom such as the zoom in Chrome causes both a scale change and
> inner width change that in my opinion could cause unexpected issues in
> between breakpoints.


Not if it is actually RWD approach, which should use percentages for
widths. To quote the original RWD article: "Fluid grids, flexible images,
and media queries are the three technical ingredients for responsive web
design."


That's why you'd need to test for zoom even when responsive design is
> used. You can see this by simply resizing your window and the innerWidth
> will change but the devicePixelRatio will not.
>

I'm not going to argue against testing layouts, but I don't understand the
pixel ratio bit.

If I screenshot my homepage with the browser at 427px wide:
https://alastairc.ac/tmp/homepage-small.png

It is exactly the same as a screenshot at 1280px wide zoomed in by 300%:
https://alastairc.ac/tmp/homepage-zoomed.png

Yes, the device pixel ratio is different due to zoom level, but the layout
and proportions are the same. If you are testing by changing browser width,
that is equivalent to testing with zoom.

Kind regards,

-Alastair