Configuring an iPhone Web App With Meta Tags

iPhone Web Applications are underestimated in iPhone development. However, they are surprisingly easy to setup. The process only requires a few Meta tags.

Step 1: Looking at the Web Application

It is best to build the web application first and then move onto configuring it into an iPhone Web App.

The application itself, in this case, is a simple page which tells the time. Accordingly, the app is named ‘Time’. It uses jQuery to achieve the final result. I have used the jQuery Clock plug-in to do this in just a few lines of jQuery.

<script type="text/javascript">
	$(document).ready(function() {
		$('#jclock').jclock();
	});
</script>

Step 2: Setting the Application Name

This is perhaps the simplest of all steps. All that is needed is to change the Title tag to the name of your web application.

<!-- Page Title -->
<title>Time</title>

Step 3: Setting the Application Icon

The next step is to set the application icon. This is the 57px by 57px icon which appears on the home screen of the iPhone. On retina display devices, this is a 114px by 114px icon, and you can accomodate for both simply by using the higher resolution icon instead (older devices will auto-resize it down). I am going to use the following icon for this tutorial:

There are two options to setup this icon. The first is to use the icon as is, all that is added are rounded corners. To do this we use this Meta tag:

<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>

The second option gives the icon the standard Apple gloss:

<link rel="apple-touch-icon" href="img/icon.png"/>

I chose the precomposed icon and the final result is as follows:

Step 4: Setting the Splash Screen

While your web application is loading, you can choose to have a splash screen displayed. This image should be 320px x 460px. To set this up, use this Meta tag in the Head of your document.

<link rel="apple-touch-startup-image" href="img/splash.png" />

This is the final result of the splash screen.

Step 5: Make the Application Full Screen

The next step is to remove the default Apple toolbars and menu bars. These are the ones which show the web address and search at the top and which show the bookmark, back and forwards buttons at the bottom. This is done with the following Meta tag:

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

Step 6: Setting the Status Bar Style

You can also set the style of the status bar. This is the bar at the top of the screen which displays information such as signal strength, battery and Wi-Fi signal strength. For this to work, the application must be set to full screen as in step 5. For this Meta tag there are three options.

The first is the normal grey gradient:

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

The second is a solid back status bar, this is mostly the best option:

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

The last is a transparent back status bar, this allows the user to see through the status bar:

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

Our final status bar:

Step 7: Setting the Viewport

This Meta tag tells the device the width of the page to display, the minimum and maximum zoom value, the initial zoom value and whether the user has the ability to zoom in and out. If your website is less than 980px (the default width of the webpage display) then the width should be set with this tag. Also, if the application is iPhone specific, then the width should be set to the width of the iPhone, iPad or iPod Touch. One should also bear in mind that instead of using the actual value of the width and height of the screen, values of ‘device-width’ and ‘device-height’ should be used. Here are some example tags:

<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = no" />
<meta name="viewport" content = "width = device-width, initial-scale = 2.3, minimum-scale = 1, maximum-scale = 5" />

Here are all the available options:

• width – Width of viewport in pixels. [Default: 980, Range: 200 - 10,000]
• height – Height of viewport in pixels. [Default: calculated with the width and aspect ratio of the device, Range: 223 - 10,000]
• initial-scale – The initial scale of the viewport. [Default: calculated to fit the webpage in the area available, Range: calculated with minimum-scale and maximum-scale properties.]
• minimum-scale – The minimum scale of viewport. [Default: 0.25, Range: >0 - 10]
• maximum-scale – The maximum scale of viewport. [Default: 1.6, Range: >0 - 10]
• user-scalable – Whether the user can zoom in and out. [Default: yes, Options: yes or no]

Step 8: Testing the Web Application

We are now done setting up the web application, let us add it to our device.

• Browse to the location of the app on your website.
• Press the ‘plus’ button on the bottom of the screen.

• Press ‘Add to Home Screen’.

• Press ‘Add’

The web application is now effectively ‘installed’.

Conclusion

Now, with your application setup, you will be able to launch it from the home screen and then see the splash screen while it loads up. Once loaded the application should be full screen with your chosen status bar.

Preview the final application by downloading the attached zip file. In order to test it out on your iOS device, you will need to place the code online.

I hope you enjoyed this tutorial and thank you for reading.