A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iPhone OS. You can tailor your web application for Safari on iPhone OS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iPhone OS that are ignored by other platforms.
For example, you can specify an icon for your web application used to represent it when added to the Home screen on iPhone OS, as described in “Specifying a Webpage Icon for Web Clip.” You can also minimize the Safari on iPhone OS user interface, as described in “Changing the Status Bar Appearance” and “Hiding Safari User Interface Components,” when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.
Read “Viewport Settings for Web Applications” for how to set the viewport for web applications on iPhone OS.
iPhone OS Note: The Web Clip feature is available in iPhone OS 1.1.3 and later. The apple-touch-icon-precomposed.png filename is available in iPhone OS 2.0 and later.
You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iPhone OS.
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 iPhone OS 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 iPhone OS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
See “Create an Icon for Your Web Application or Webpage” in iPhone Human Interface Guidelines for Web Applications for webpage icon metrics.
On iPhone OS, 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:
<link rel="apple-touch-startup-image" href="/startup.png"> |
In the above example, replace startup.png with your startup screen filename. On iPhone and iPod touch, the image must be 320 x 460 pixels and in portrait orientation.
As part of optimizing your web application for Safari on iPhone OS, have it launch in full-screen mode to look like a native application. When using full-screen mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read “Changing the Status Bar Appearance” for how to minimize the status bar.
Set the apple-mobile-web-app-capable meta tag to yes to turn on this feature. For example, the following HTML displays web content in full-screen mode.
<meta name="apple-mobile-web-app-capable" content="yes" /> |
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
If your web application displays in full-screen mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iPhone OS. Do so using the status-bar-style meta tag.
This meta tag has no effect unless you first specify full-screen mode as described in “Hiding Safari User Interface Components.” Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style, to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.
For example, the following HTML sets the background color of the status bar to black:
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> |
Last updated: 2010-03-24