I'm also torn on this issue. It's safe to conclude that for many users,
Responsive has broken the Zoom button. That's a strict no-no - don't break
fundamental features of the browser. Yet Responsive is essential to dealing
with a wide range of devices.
Worse, it's hard to tell what the user intended.
If I have my browser always set to zoom 200%, it's probably because I've
got bad eyes and want to see everything larger - fonts, images with text in
them, logos, icons presented as images - all of it - not just a font zoom.
If that means the Responsive code on the page presents it all to me like
Mobile so I don't have a horizontal scroll, that seems ideal.
But if I hit the Zoom feature while the page is open, I'm probably trying
to zoom in on something specific. Two problems, one minor one major:
1) The site reflows, confusing me. Some sites look dramatically different,
some less so.
2) If I've scrolled down at all, the reflow is going to throw the content
I'm focused on downwards, or at times, upwards, depending on how it was
coded. Bootstrap even includes things like hidden-xs, which people often
use to hide sidebars. If I was trying to zoom in on the content of a
sidebar, it might scurry down the page then vanish on me entirely as I
zoom. Definitely not what I wanted.
So it seems the right answer is to present the user with a reflowed site if
they land on the page already zoomed, but after that, respond to zooming by
not reflowing at all. Has anyone done this?
I looked at Katherine's brilliant proposed fix, but it doesn't do it - the
site linked to there actually has the fix implemented and, well, it doesn't
fix it. Zoom still reflows.
I think this is a problem for Bootstrap especially, since it's the most
widely-in-use Responsive library, uses pixel-width media queries, and
exhibits this problem. Sadly this was reported as a bug in 2012 and as so
often happens in open source, the maintainers responded essentially, "This
isn't what I want to do" https://github.com/twbs/bootstrap/issues/2002
If no one's done it here's how I'd propose coding it:
1) Replace all media queries for sizing, something like this:
@media (min-width: 720px) {
>720px styles go here
Becomes:
body.minWidth720 {
>720px styles go here
Then apply js to the page. You'd place a very small amount in the head (bad
for performance but essential for preventing a FOUC) that measures window
width and applies the relevant classes to the body tag.
Then at the end of the body tag, more Javascript listens for resizes and
responds by swapping the body classes. Since zoom doesn't trigger resize*
on most devices, you'd still get the site to reflow nicely, when for
example someone rotates a smartphone from 720 wide to 1280 wide, but when
they zoom, nothing would reflow (since it was set in stone by the js in the
head).
Thoughts?
*Not tested, need to verify - if it does trigger resize though the solution
is to attempt to detect whether it's a zoom click vs browser drag/rotate.
