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() {

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 -->

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:

Build an iPhone Web App

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:

Build an iPhone Web App

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.

Build an iPhone Web App

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:

Build an iPhone Web App

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.
Build an iPhone Web App
  • Press 'Add to Home Screen'.
Build an iPhone Web App
  • Press 'Add'
Build an iPhone Web App

The web application is now effectively 'installed'.


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.

Related Posts
  • Computer Skills
    An Introduction to Bluetooth, Mac and iPhoneBluetoothpreview
    Bluetooth is a wireless protocol that allows the wireless connection of devices. In this tutorial I’ll explain what Bluetooth is, I'll show you how to use an iPhone to unlock a Mac, how to enter text on an iPhone with the Mac's keyboard and how to use a Mac to make and receive phone calls. All with the help of Bluetooth.Read More…
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Code
    HTML5: Battery Status APIPdl54 preview image@2x
    The number of people browsing the web using mobile devices grows every day. It's therefore important to optimize websites and web applications to accommodate mobile visitors. The W3C (World Wide Web Consortium) is well aware of this trend and has introduced a number of APIs that help with this challenge. In this article, I will introduce you to one of these APIs, the Battery Status API.Read More…
  • Web Design
    Creating a Simple Responsive HTML EmailEmail new rwd thumb
    In this tutorial I will show you how to create a simple responsive HTML email which will work in every email client, including all the new smartphone mail clients and apps. It uses minimal media queries and a fluid width approach to ensure maximum compatibility.Read More…
  • Code
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…