If you like gadgets you need my RSS feed. It keeps you up-to-date on all the gizmos you love!
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:<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.
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.
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.
Copyright Mac Publishing LLC. For personal use only.
Originally Syndicated via RSS from iPhone Central
0 Comments on “One line of code can make your site iPhone-friendly”
Leave a Comment