Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

Ah, thanks for the explanation. I do vaguely recall hearing about this issue a while back, but never grokked the details. I find it interesting that people would prefer to disable zooming just to avoid wonkiness on orientation changes -- seems like a way less important issue. But hey, design is all about making choices, so I can understand how other people might weight those issues differently than I do.

A followup question: you say that "In practice, many sites don’t adapt using media queries, and so popular mobile browsers may adjust the zoom level instead." ... does this imply that the orientation change issue isn't a problem if you use media queries properly? If that's the case, then the maximum-scale=1 seems like a moot point (because if you're adding a meta viewport tag to your markup, you're already thinking about responsive design, right?). Or am I misunderstanding what you said?



... does this imply that the orientation change issue isn't a problem if you use media queries properly?

I wouldn’t quite say that. It’s more that whatever effort you put into using media queries to adapt your site somewhat intelligently for visitors with different devices is wasted if those devices ignore your media queries and just naïvely scale everything instead.

For example, one site I work on has a single-column layout that works reasonably well on smartphone-size devices. It also looks OK on a typical tablet in portrait orientation, but there it wastes significant screen space, because it increases the horizontal margins rather than letting text lines run very long. If that tablet is rotated to landscape orientation, we have enough space to switch into a two-column layout, which happens to fit the structure and content we’re showing. This lets us fit more of the content onto the screen than the single-column layout, because we don’t waste that extra space at the horizontal margins any more.

This is all good stuff, and from time to time we get favourable comments from visitors who were pleasantly surprised that the site adapted. However, without some of the trickery we do with viewports, what would happen instead (at least on some devices) is that rotating portrait to landscape would wind up showing a zoomed-in version of our single-column layout, while rotating landscape to portrait would zoom out to fit our two-column layout with much smaller text than intended, or some variation on those ideas depending on the specific device/OS/browser.

The catch with all of this is that for various reasons people might genuinely want to zoom in on our site. Maybe their eyesight isn’t great and they just want the text bigger for comfortable reading. Maybe they want to zoom in on some of the graphics or videos we show for similar reasons. So we don’t want to block intentional zooming by the user, just the browser’s “borrowing” of that feature to second-guess our carefully adaptive design.

Thus today we wind up employing the sort of workarounds I mentioned before. What I’d like to do, though, is just to define the sensible layouts for the site using media queries, and then have browsers automatically fit the most appropriate layout based on the orientation and user-selected zoom level on each visitor’s device.


Thank you so much for the detailed explanation. Makes sense, and gives me a much better understanding of the trade-offs. Cheers!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: