While Apple boasts about the ability of the iPhone’s browser to display the real, not watered down Internet, there are things that can be done to make your site more accepting of the mobile browser. On the far-end of the spectrum, there’s designing an iPhone-specific version of your site; if you’re looking for a somewhat less time-consuming approach, consider this advice from Craig Hockenberry of the Iconfactory:
…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:What does that line do? Well, since the iPhone displays the entire site zoomed out, specifying a viewport width means that the iPhone will zoom by default to that size, leaving less unused space around your content.<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.
Of course, in order to find the right width for your site, you’ll need to engage in a little old-fashioned trial and error. The 808 number above works for Craig’s site, but it probably won’t work for yours. But it’s a good way to “optimize” your site for the iPhone without having to go overboard.
Thanks for the note.
However, this apparently does not work as well for all cases.
I have a site that uses CSS to present a fixed column, and a variable width column.
As is, the site shows up and works perfectly on the iPhone, but using the above given meta tag, the site looks worse, esp. the fixed width column.
YMMV.