iPhone zooming is complicated. When designing MobileSafari (the iPhone version of the Safari web browser), Apple opted to preserve the desktop Safari experience as closely as possible. This lets them talk about “the real web in your pocket”, and provides Apple an opportunity to sneer at competing handheld devices that present “the mobile web” instead. The reality, of course, is that there’s some value to the mobile web, or it wouldn’t exist. The issue is that the iPhone is quite limited compared to a Mac or PC ‘desktop’ (or laptop) computer, so mobile browsers have been making trade-offs for years to come as close as practical to the desktop experience, while accepting that there must be deficiencies.
One area where Apple’s desktop mimicry is particularly clear is in page rendering. MobileSafari appears to first calculate how desktop Safari would lay out a particular page, then compress it to fit on the iPod’s relatively tiny screen, and let you zoom around the page to read content of interest. This gives great demo, but begs the question: When I’m reading a web site on my iPhone, why would I care what it looks like on my desktop? My desktop has 4,224,000 pixels, a full keyboard, and a 5-button 2D scrolling mouse. My iPhone has 153,600 pixels (less than 1/27th as many) and 10 fat fingers. Denial of these differences is a neat trick, but can never completely succeed.
For comparison, Plucker focuses on getting easy-to-read text onto a handheld device, with optional support for anti-aliased fonts and images up to the maximum display quality of the Palm’s screen. This means lines wrap wherever they fit, text is whatever size you choose (although the built-in set of fonts is quite limited), and web pages look nothing like they would on a full-sized computer. Plucker’s display model is quite popular, and very much “the mobile web” Steve Jobs scoffed at, although Plucker for offline web browsing — it predates the iPhone’s 802.11g and EDGE standards. A full-sized computer downloads web pages, reformats and compresses them for the Palm, and stores them for later downloading. The Palm part works even without a network connection — subways passengers, rejoice!
Similarly, one almost always wants to scroll a full page in a web browser and the Palm has physical keys for this, but the iPhone instead scrolls based on how far and fast you flick. I’d prefer an option (at least in MobileSafari) to always scroll by a page. This would save me both the effort of figuring out how far and fast to flick, and time finding my place after scrolling.
My initial reaction to MobileSafari was that the fonts were surprisingly fuzzy and hard to read. Naturally — they were designed for computers with more and larger pixels, being scaled down by the iPhone’s smaller pixels, and scaled again to fit on-screen. Sometimes fonts are scaled up, to make them easier to read. In contrast, Plucker never scales its fonts.
Craig Hockenberry’s furbo.org has several articles on the iPhone, including pointers for web designers on how to manage iPhone scaling. It doesn’t answer my question, though: How can I choose a particular font size, and get the iPhone to wrap text to fit? Unfortunately, I don’t think there is an answer right now.
MobileSafari scaling is complicated and occasionally buggy. I am aware of these scaling options:
When a page is loaded, the iPhone renders it as closely as it can to the way desktop Safari would — not at all based on the iPhone’s capabilities, but instead for a fictitious Mac. Then it shrinks everything down to fit the width of the iPhone’s screen (either 320 pixels in vertical mode, or 480 in horizontal mode).
I tried to duplicate the iPhone’s default scaling, and it was a pretty good match for a 684-pixel-wide by 695-pixel-high Mac Safari 3 window (475,380 total, over 3 times as many pixels as an iPhone has). At 72dpi that would be 9.5″ by 9.65″, or 13.54″ diagonal; on a 110dpi 15″ MacBook Pro it’s 6.22″ by 6.32″, or 8.86″ diagonal. In contrast, the iPhone screen displays the same text at 2″ wide by 3″ high, or 3.5″ diagonal. Tiny!!
If you tap twice on a column of text, the iPhone zooms to fit the column to the width of the screen. For pages that have no native width (plain HTML, no layout), tapping twice centers the tapped paragraph on-screen — very handy for scrolling, as you can just tap at the bottom of the screen each time you get to the end of the page. For pages with layout, tapping twice a second time zooms back out.
If you tap twice on an image, the iPhone zooms to fit the entire image on-screen. It does not work for all images, such Questionable Content — perhaps because QCs are too tall, and MobileSafari doesn’t even try to fit them.
If you place two fingers on the screen and pinch them together, the iPhone zooms out. If you “unpinch”, it zooms in. Unfortunately the iPhone does not reflow the text to fit edge-to-edge, so this is almost never convenient for reading — either space is wasted or text is off-screen.
That’s six different zoom options and I may be missing more. But none is the one I want (which would be easiest to read) because the iPhone’s browser always wraps text to match desktop Safari, and never to provide the most readable page on the iPhone.
In reality, I double-tap almost every page to zoom a column to full width, and then hope that I can read the text in either vertical or horizontal mode. Usually I can.
I find the whole subject disappointing. I had more readable web pages on the Treo 600 and 650 for years! Apple could make the iPhone a superior device for reading web sites and ebooks, but has instead gotten hung up on “the real web in your pocket” and pretending that iPhones are running desktop Safari.
Update 2007/10/26: Apple’s just-released “Safari on iPhone Part II: Optimization” video discloses that the iPhone renders everything to 980wx1091h, presumably calculated to be close to the usable area of a browser window on a 1280×1024 17″ LCD, after menu bar, Dock, and Safari controls. This leaves me wondering why 684w*695h was such a close match.
I’ve added a couple lines to a couple of my pages, and they improve iPhone presentation substantially (no, they aren’t new, but they do work):
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=.8">
