3 ms·

Is there an actual benefit to having this on web pages? I see it a lot (unfortunately -- makes it very difficult when I'm on my iphone sometimes), and am not su

Is there an actual benefit to having this on web pages? I see it a lot (unfortunately -- makes it very difficult when I'm on my iphone sometimes), and am not sure why people do this. There’s more than that specific viewport option, but often this kind of technique is an attempt to defeat mobile browsers that rescale your site when you rotate between portrait and landscape orientations. If the site is designed to adapt gracefully to different screens using media queries, then what you probably want instead is for the browser to just reflow the layout according to the new page width. In practice, many sites don’t adapt using media queries, and so popular mobile browsers may adjust the zoom level instead. That means whatever you could see horizontally before the orientation change is still what you can see afterwards but bigger/smaller. One way to force the adaptive behaviour is to use the viewport settings so the zooming isn’t allowed. However, that also interferes with deliberate zooming by the user. Sometimes you see all kinds of complicated workarounds for that, such as detecting an orientation change and temporarily blocking zooming, or detecting an attempt to zoom and then disabling the restriction temporarily so if the user repeatedly tries to pinch-zoom then subsequent ones work. Sadly, a lot of developers just copy-paste the viewport hack without realising the full implications, and that is when we see problems for users who really do want to zoom in. None of this is ideal, but as far as I know we still don’t have a reliable, standardised way for sites to specify how orientation change should be treated for best results, so for now viewport hackery seems to be the best known workaround.

jordanlev 12y ago
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?
- Chris_Newton 12y ago
  ... 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.
  - jordanlev 12y ago
    Thank you so much for the detailed explanation. Makes sense, and gives me a much better understanding of the trade-offs. Cheers!

jordanlev 12y ago

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?

Chris_Newton 12y ago
... 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.
- jordanlev 12y ago
  Thank you so much for the detailed explanation. Makes sense, and gives me a much better understanding of the trade-offs. Cheers!