Saturday, August 25, 2012

Configure Web Application for iPhone/iPad

To develop rich mobile application there are some guide lines provide by safari developer library. Developer can develop web application like a native application using this guide lines. here are the highlight of some guide line

1) Specify Lunch icon/ web clip:
Developer can specify the lunch icon for web application like native application it is default feature of safari. It is not necessary to specify the lunch icon, safari provide default lunch icon for the web application.

  • To specify an 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 on iOS won’t add any effects to the icon.
  • To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
  • In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
  • To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

  • The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 57 x 57.
If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If multiple icons are suitable, the icon that has the precomposed keyword is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... or apple-touch-icon-precomposed... prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:
  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png
2)Define star up screen for iPhone/iPad

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


3)Hide status bar:

For hiding status bar for iOS device developer can use following meta tag:

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

Reference:

No comments:

Post a Comment