Update: this bug is not an issue as of iOS6 however the requirement to support pinch zoom is still necessary.
A key feature of mobile browsing is being able to zoom in to read content and out to locate content within a page. It’s an invaluable tool however I keep stumbling across sites that suppress zoom and with it one of the main things that make mobile browsing viable for everybody.
Zoom can be repressed by doing the following:
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;” name=”viewport”>
<meta name=”viewport” content=”user-scalable=no” />
It’s the initial-scale=1.0 and maximum-scale=1.0 which effectively disables zoom in the first example and content=”user-scalable=no” in the second. On mobile you want to give the user as much control over screen size as you can so instead do something like this:
<meta content=”width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;” name=”viewport”>
<meta name=”viewport” content=”user-scalable=YES” />
Done this way everyone gets to read your content.
iOS Bug (updated 30 July, 2012)
As you will see from the comments below there is an iOS bug that prevents elegant scaling when in landscape mode. Details can be found in an iOS bug report and test page. Here are also a couple of articles that go into more detail about it:
- The iOS Zoom setting disables maximum-scale=1 and user-scalable=no by Roger Johansson
- Orientation and scale by Jeremy Keith