Now design styles and interactive Web applications, many developers similar to native applications, for example, its scaling fit the entire screen on iOS. When you add it to the main screen, you can look like a native application by making it the same as in the iOS Safari for your custom Web applications. You can do this using the iOS settings other platforms ignored.
For example, you may be used to represent the Web application's icon designated icon is added to the iOS home screen, such as designated Web Clip icon the web. When you start a Web application from the main screen, you can also minimize Safari on iOS user interface, such as changing the appearance and hide the status bar Safari user interface components (search bar and toolbar). Other platforms will be ignored when these are optional settings to add to your page content.
Read the Web application "Viewport Settings" to learn how to set the viewport Web applications on iOS .
Designated web icons Web application
You might want users to be able to add your application or Web page links to the ios device's home screen. These links are represented by icons called Web Clips. Follow these simple steps to specify an icon to represent your iOS application or web page.
To specify an icon for the entire site (every page on the site), place an icon in PNG format files are placed in the Documents folder named root apple-touch-icon.png
To specify an icon for a single web page or website icon is replaced with a specific icon page, add a link element to the web page, as shown below:
<link rel =“apple-touch-icon”href =“/ custom_icon.png”>
In the example above, custom_icon.png replaced with the name of your icon file.
To specify multiple icons for different device resolution (for example, supports both iPhone and iPad devices), please add a property sizes for each link element in the following manner:
<link rel =“apple-touch-icon”href =“touch-icon-iphone.png”>
<link rel =“apple-touch-icon”sizes =“152x152”href =“touch-icon-ipad.png”>
<link rel =“apple-touch-icon”sizes =“180x180”href =“touch-icon-iphone-retina.png”>
<link rel =“apple-touch-icon”sizes =“167x167”href =“touch-icon-ipad-retina.png”>
Using the most appropriate device icon. About the current icon size and suggestions, see iOS Human Interface Guidelines "Graphics" chapter.
If there is no suggestion that matches the size of the device icon, the icon will be used more than the minimum recommended size. If there is no larger than the recommended size of the icons, the greatest icon is used.
If you do not use the link element to specify the icon will be at the root of the site in search with apple-touch-icon ... prefix icon. For example, if the appropriate icon size of the device is 58 x 58, the system will search for a file name in the following order:
- apple-touch-icon-80x80.png
- apple-touch-icon.png
Note: Safari on iOS 7 will not add effects as an icon. The old version of Safari will not add effects to an icon file using -precomposed.png suffix named. For more information, see Step One: Identify your app in iTunes Connect.
- Specify the startup screen image
On iOS, the native applications Similarly, you can specify the startup screen image displayed when the Web application starts. When your Web application is offline, which is very useful. By default, applications use Web screenshot of the last start. To set another startup image, add a link element on the page, as follows:
<link rel =“apple-touch-startup-image”href =“/ launch.png”>
In the example above, launch.png replace your boot screen with the file name. About the current startup screen size and suggestions, see iOS Human Interface Guidelines "Graphics" chapter.
Add Start icon title
On iOS, you can specify a Web application title for the start icon. By default, using the <title> tag. To set a different title, adding a meta tag to the page, as follows:
<meta name =“apple-mobile-web-app-title”content =“AppTitle”>
In the example above, replace AppTitle your title.
Hide Safari user interface components
On iOS, as part of optimizing your Web application, it is more like stand-alone mode using a local application. When you use this stand-alone mode, Safari will not be used to display Web content - specifically, the top of the screen without a browser URL text field, or no button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read change the status bar to learn how to minimize the appearance of the status bar.
The apple-mobile-web-app-capable meta tag set to yes open independent mode. For example, the following HTML will be used in standalone mode to display Web content.
<meta name =“apple-mobile-web-app-capable”content =“yes”>
You can use JavaScript window.navigator.standalone read-only Boolean property to determine whether a web page is displayed in stand-alone mode. For more information on standalone mode, see the apple-mobile-web-app-capable.
Change the appearance of the status bar
If your Web application is displayed in stand-alone mode, as a native application, you can minimize the top of the screen displayed on the iOS status bar. Do so, use the status bar-style meta tags.
Unless you first specify to hide the Safari user interface components in stand-alone mode, otherwise this meta tag will not work. Then use the status bar style meta tags apple-mobile-web-app-status-bar-style according to your application needs to change the appearance of the status bar. For example, if you want to use the entire screen, set the status bar style is set to translucent black.
For example, the following HTML status bar background color to black:
<meta name =“apple-mobile-web-app-status-bar-style”content =“black”>
For more information about the appearance of the status bar, see iOS Human Interface Guidelines for the "UI column" chapter.
Links to other native applications
Your Web application can be linked to other iOS apps built by creating a special link with a URL. Functions available include dialing a telephone number, or send text messages iMessage, YouTube videos and open (if installed) in its native application. For example, to link to a phone number, an anchor element constructed in the following format:
<a href="tel:1-408-555-5555">给我打电话</a>
For a complete view of these features, see the Apple the URL of Scheme Reference .
This is the code I added on the project index.html:
<!-- Specifying a Webpage Icon for Web Clip for Safari -->
<link rel="apple-touch-icon" href="assets/imgs/logo.png">
<!-- Specifying a Launch Screen Image for Safari -->
<link rel="apple-touch-startup-image" href="assets/imgs/splash.png">
<!-- Hiding Safari User Interface Components -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Changing the Status Bar Appearance -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Actual experience as shown below:
The user can see added to the main screen, with icons and start drawing from the definition of open safari webapp will not have an address bar and toolbar, native experience with the same.
Because I use the iphone comes with screen recording function, so the top status bar background is occupied, the actual figure is to start full-screen experience.