With iOS5 boasting such an wide array of HTML5 and CSS3 support there’s no better time to start dipping your toes in the world of web app creation. So I thought I’d go ahead and put together a quick reference for all the little snippets you’ll need to get started and emulate that iOS native app look and feel.

The following bits of code will need to go in the of your document:

This will let the iOS device know that it can run fullscreen when the user bookmarks it on their springboard.

This sets the status bar color (the bar with the network status, clock, battery, ect). You can also change the content parameter to content=”default” (grey gradient) or content=”black-translucent” (black with transparency).

This adds an icon to your web app that will show up on the springboard when a user saves it. This will automatically round the icons corners and add Apple’s gloss overlay to it.

You can use this icon option instead and it will do the exact same thing but it won’t automatically add the gloss to your icon.

I love this one! It adds the startup splash screen.

On the iPad you can even have a landscape and portrait splash screen depending on how the user is holding th device.

This is landscape.

This is portrait.

This option will make sure the web app is fitting perfectly on your iOS device. It also disables the users ability to zoom in or out. This is good because it helps provide more of that native app feel, but make sure you’re content is large enough that the use won’t need to zoom.

Ok enough with those link and meta tags, lets move onto a few more extra tips that can provide a wonderul iOS experience. First, and foremost the user will have to find your app online and add it to their homescreen. In that situation you’ll be seeing the Safari address bar, but we didn’t design our app for that so let’s hide it!

So this little guy calls hideURLbar() as soon as the app has loaded and it will automatically hide the Safari address bar so that it is no longer visible. You can either stick this script at the bottom of your web app just before the closing

tag or preferably throw it in an external JavaScript file.