The iOS Zoom setting disables maximum-scale=1 and user-scalable=no
The setting I mentioned in iOS tip: how to zoom on web pages that have disabled user zoom lets you zoom on all web pages, which is great. But it’s even better than I originally thought.
Instead of having to double-tap with three fingers to zoom the entire screen of your iPhone, iPod Touch or iPad, it turns out that enabling the Zoom setting actually makes Safari ignore any meta name="viewport"
scaling settings on the page. You can zoom in and out the normal way by using two fingers.
I think that this makes using the following to prevent zooming a bit more acceptable:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
It’s not ideal that you sometimes need to do that to avoid the problematic auto-zoom “feature” in Safari for iOS. In earlier posts on this subject I’ve strongly recommended against doing this, and I still think you shouldn’t disable zoom unless you really need to.
However, since I have now realised that the Zoom setting actually negates the viewport
meta element, giving users who need or want to be able to zoom on all web pages the ability to do so, I think it can be a reasonable compromise between what the user needs and the designer wants. If you disable zooming, please take care to specify a sensible (i.e. large enough to read comfortably) font-size
though.
Still, there is a problem—making users aware of the Zoom setting (it’s in Settings > General > Accessibility) and what it does. It also seems that the Zoom setting is only available on iPhone 3GS and newer. Something to think about, I guess.
And no, I am not (at least not intentionally) encouraging developers to disable user scaling on iOS. I’m just noting that there is a way for end users to override developers when they do, which is a good thing. Even better would be if Apple either disabled the “auto-zoom when changing orientation” feature or made it easy for developers to disable it without also disabling user scaling.
- Previous post: Centering button elements and input buttons
- Next post: On using h1 for all heading levels in HTML5