Want to make your site look better on the iPhone with one line of HTML?
It’s easy—just add a <meta> tag that lets the iPhone know how wide to display the initial page. I added the following code to the <head> in my template yesterday:
<meta name="viewport" content="width=808" />
Every browser besides MobileSafari will ignore this information. But it does something very important on the iPhone: it optimizes the viewport for your content.
By default, the iPhone uses a viewport of 980 pixels—a value chosen to maximize compatibility with a broad range of web sites. When you specify the viewport width explicitly, you will eliminate any empty space between that 980 pixels and the width of your <body> element.
On this site the <body> is 808 pixels wide, so there were 172 pixels of content-free space being used to display the page. On a screen that’s 320 pixels wide, that’s significant. So much so, that by making this simple change, the headings on my blog posts are now readable on first load of the page (previously, the text was too small.)
As always, a picture is worth a thousand words. Here are the changes that could be made on a couple of my favorite web sites:
Zeldman
Looking at Jeffrey’s CSS file, I see:
html {
min-width: 742px;
}
So his one line of code would be:
<meta name="viewport" content="width=742" />
That’s all folks!
Daring Fireball
Likewise, Gruber had specified this CSS:
body {
...
min-width: 760px;
}
Which would mean this addition to the <head>:
<meta name="viewport" content="width=760" />
But there’s a problem…
MobileSafari uses a heuristic to adjust the viewport based on the width and aspect ratio of the page. And since Gruber is a man of many words, the page is long and the initial scale for the viewport isn’t optimal. So he could use this instead:
<meta name="viewport" content="width=760, initial-scale=0.4" />
But his problems aren’t over yet—there’s still an issue with usability. You can double-tap to zoom in to read an article—and when you double-tap to zoom back out, you’re using the suboptimal scale factor again. This is easy to work around by specifying a minimum scaling factor:
<meta name="viewport" content="width=760, initial-scale=0.4, minimum-scale=0.4" />
And it’s still just one line of code!
Are you wondering how I came up with that magic scaling factor of 0.4? I used a tried and true development practice: trial and error. While using this sophisticated technique, make sure to close the window in MobileSafari (by clicking on the red X icon.) The viewport scale is not modified when you refresh the page, so you’ll only see changes when starting on a new page.
Hopefully, Jeffrey and John will read this post and make the changes to their sites—I like reading them on the iPhone :-)
Update: WordPress is turning the double quotes in the examples above into smart quotes. You’ll want to convert them before adding them to your template. And for more information on viewports, check the Apple iPhone developer page (you must click on “Optimizing for Page Readability” to view it.)