META tags to help your iOS web app look like a native app

Creating an iOS web app is extremely simple, yet extremely underrated. Advantages to web apps include being able to instantly “push” updates of your app, not having to go through the Apple approval process, and multi device compatibility.

Making your web app feel like a native app is not so hard, and with the following HTML tags, your app should be looking good in no time. Please note that all of the following tags go in between your HTML’s <head></head> tags.

Setting the application’s icon

The application icon is what the user will see when they add your web app to the home screen.

<link rel=”apple-touch-icon” href=”app_icon.png”/>

If you don’t want the gloss, use this instead

<link rel=”apple-touch-icon-precomposed” href=”app_icon.png”/>

 

Setting the application’s loading image

If you’ve used an iPhone app before, you know that before being able to use the application, a “splash” image shows up until the app is done loading. Setting this in your web app is super easy as well, here’s the tag you use –

<link rel=”apple-touch-startup-image” href=”loading_image.png” />

 

Make the application “Full Screen”

If you want to hide the Safari navigation controls so that your application appears “Full Screen”, the following line will do the trick.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

 

Changing status bar types

iOS has several different types of status bars. Black, translucent and the default white gradient bar. If you don’t want the default white bar, here are the different META tags that can be used to switch them up

Default

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />

Black

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”  />

Black Translucent

<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”  />

 

Allowing your user to scale your app

If you don’t want your user to be able to pinch to zoom in / out of your app, the following tag will help you out.

<meta name=”viewport” content = “width = device-width, user-scalable = no”   />
About Raphael Caixeta
I've been programming ever since I was 13, learning Visual Basic. After a while, Visual Basic got really boring. A friend of mine started learning PHP and showed me some cool little sites he was making. I started learning PHP the weekend after. 4 years later, I'm was able to create amazing websites using PHP, MySQL and jQuery. I started iPhone development a few months after the SDK was out, and that's how I became an app developer.