Guidelines for developing Web Apps for Apple iPhone


Using the Viewport Meta Tag

Viewport is the visible area of Safari browser.  Viewport meta tag is used to improve the presentation of you web app on Apple iPhone/iPod Touch. Typically, you use the viewport meta tag to set the width and initial-scale of the viewport. You should use constants values instead of numeric values when referring to the dimensions of a device. Use “device-width” for the width of the device, and “device-height” for the height in Portrait Orientation.

To set the viewport width to the width of device, add this to the <head> section of your web page.

<meta name=”viewport” content=”width=device-width” />

To set the initial scale to 1.0, then add the following to your webpage

<meta name=”viewport” content=”initial-scale=1.0” />

To set the initial scale and to turn off user scaling, add the following to your web page

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no ” />

If you set some of the properties , the Safari on iOS infers the values of the other properties with the goal of fitting the web page in the visible area. For example, if just the “initial-scale” is set, then width and height are inferred automatically. Similarly, if you just the width is set, then the height and initial-scale are inferred. If the inferred values do not work for your web page, then set more viewport properties.

Specifying an Webpage icon for Web Clip

If you want the users to add your web application or web page link to their Home screen, these links represented by an icon, are called Web Clips. Follow these steps to add an icon to your web application.

  • To specify and icon for the entire website(every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari won’t add any effects to the icon.
  • To specify an icon for the single webpage or replace the website icon with a web page-specific icon, add a link element to the webpage,

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

  • To specify multiple icons for different device resolutions- for example, support both iPhone and iPad devices- add sizes attribute to the link element as follows

<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />

Specifying a Startup Image

On iOS, similar to native applications, you can specify  a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as follows.

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

Apple iPhone/iPod Touch  Limitations

Your webpage performing well on desktop browsers is no guarantee that it will perform well on Apple iPhone/iPod Touch. Keep in mind that Apple iPhone/iPod touch used EDGE(lower bandwidth, higher latency), 3G(higher bandwidth, higher latency) and WiFi (higher bandwidth, lower latency) to connect to internet. Therefore you need to minimize the size of your webpage, including unused or unnecessary images CSS, JavaScript adversely effect the performance of you website on Apple iPhone/iPod Touch.

  • The maximum size of decoded GIF,PNG and TIFF images is 3 pixels.
  • The maximum size of Canvas element is 3 megapixels
  • Individual Resources file(CSS/Image/JavaScript file) should be less than 10 MB.
  • JavaScript execution time is limited to 10 seconds for each top level entry point.
  • The maximum number of document that can be opened at once is 8.

For more information on Mobile Safari web development,

Cheers Smile