5 meta tags for making your website into a iOS Web App

Posted by Stuart Shields | Posted on April 11, 2011 | In iOS, Mobile Web, Tutorials

So you want to make your website look and feel like a native iOS app but don’t have the money to get a custom-built App? Why not make it into a Web App instead? All you need are a few meta tags and basic knowledge of HTML.

When applying any of the below meta tags, you must have the website as a Webpage on your iOS device. To do this follow the steps below:

1. Click on the launch arrow in Safari

Step 1

2. From the drop down menu select “Add to Home Screen”

Step 2

3. Don’t forget to give your Web App a name

Step 3

4. Once done your Web App should look like this:

Step 4

Viewport

Viewport changes the logical size of the viewable area on the iOS device.


<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = yes" />

The break down

Width = The width of the viewable area. Default is 980 pixels.

Initial-scale = The Scalable area of the viewable area.

User-Scalable = “yes” to allow the user to zoom in and out of your Website and “no” to turn it off.

2. Remove Toolbars and make the Website iOS capable


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

The Breakdown

Removing the Toolbars and making the Website iOS capable simply removes Safari’s toolbars and makes your site fullscreen.

3. Change the App Status Bar colour


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

The Breakdown

This changes the colour of the iOS’s status bar there are three settings you can use:

  1. default
  2. black
  3. black-translucent

Note: If you use default or black the web page content will appear below the iOS’s status bar, to give your website more real estate it’s recommended using black-translucent as it makes the website appear behind the Status bar.

4. Application Icon


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

The Breakdown
This is what the user will see when they add your app to their home screen. You can specify three different types of icons depending on what device the user is using.

  1. iPod Touch, iPhone and iPad
    <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
    
  2. iPhone
    <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
    
  3. iPad
    <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
    

5. Splash Screen


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

The Breakdown

This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.

  • iPad Landscape – 1024 x 748
    <link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
    
  • iPad Portrait – 768 x 1004
    <link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
    
  • iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)
    <link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />
    
  • iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution)
    <link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
    

If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.

To learn more about the Web Apps for iOS visit the Safari Web Content documentation page.

Stuart Shields

Is the founder of Webdesign Ne.ws. He specialises in HTML, CSS, PHP & MYSQL and jQuery

More Articles by this Author | Authors Website | Follow on Twitter