Wednesday, November 21, 2007 @ 6:00 PM

There are a few first steps you need cover in your code for an iPhone specific website or application. These keep the screen from zooming out and set the presentation to the best possible for the user.

Make your site fill the entire screen - no zooming
by default, the iPhone Safari browser zooms a webpage out to 25% of actual size. There are times when you may want it to zoom out or in for various needs, but for a starter, we're just going to show you how to make it zoom to a 1-to-1 ratio. This means that if you build the site at 320 pixels wide, a user will view the site at full width on load - no interaction required. If this seems unclear, please scroll down to the post about wallpapers and begin with the second Step 1 listed.

So, what do you need to do? Just copy the text below into your HTML - before the </head> tag and your ready to go.



One thing to note, this only covers the site in the basic portrait view mode. If a user turns the phone sideways, it will not scale to fit. We'll cover how to do that in a another post.

Hide that unsightly URL field
Okay, it's not really unsightly, but when dealing with limited space, every pixel (or 60 pixels in this case) counts. This one is as simple as the previous code snippet. Again, just place this before the </head> tag and your ready to go. On load the browser bar will still appear, but once the page has loaded it will slide up like magic and make your friends want to buy you expensive gifts. Seriously.



These are just the very basics of developing for the iPhone. In the future you can look forward to full site templates you can download here that allow you to just drop in images and links and you're ready to go. We're good like that.

As one last helpful reference, we've supplied an image below that outlines the iPhone specs and dimensions when in browser mode.


* the alternate content dimensions are if you hide the URL text field bar using the code above.

If you've developed a site or application for the iPhone, let us know. We'd love to help you show it off. We also like to keep an eye on the competition. ;)

//scott

Labels: how to, iphone development, javascript, specs