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
- The maximum size of decoded GIF,PNG and TIFF images is 3 pixels.
- The maximum size of Canvas element is 3 megapixels
- The maximum number of document that can be opened at once is 8.
For more information on Mobile Safari web development, http://developer.apple.com/devcenter/safari/index.action