Add an icon to your home screen in iOS and add a splash screen

Although not able to develop native App, but still can take advantage of the features of the Safari browser in iOS little toss, do a pseudo-web App to meet the small vanity.

Since it's a safari toss in iOS, it's basically a private property of safari that's used in the code.

Adding an icon to the home screen is the first step in the Web app:

<link rel= "apple-touch-icon-precomposed" sizes= "57x57" href= "icon-57.png" ><link rel= " Apple-touch-icon-precomposed "sizes=" 72x72 "href=" icon-72.png "><link rel=" apple-touch-icon-precomposed " Sizes= "114x114" href= "icon-114.png" ><link rel= "apple-touch-icon-precomposed" sizes= "144x144" href= " Icon-144.png ">

Adding an icon to the screen has two property values Apple-touch-icon and apple-touch-icon-precomposed, the difference is whether the layer of highlights that are automatically added to the icon in iOS will be applied.

Since both the IPhone and IPad have two-resolution devices, the size of the icons needs to be 4:144x144 (ipad retina), 72x72 (ipad), 114x114 (iphone retina), 57x57 (iphone).

You can use the sizes dimension to tell the device which icon to call.

With the icon is not enough, but also need to add a splash screen:

<link rel= "Apple-touch-startup-image"  sizes= "2048x1496"  href= "Icon-2048x1496.png"  media = "screen and  (min-device-width: 1025px)  and  (max-device-width: 2048px)  and   (Orientation:landscape)  and  (-webkit-min-device-pixel-ratio: 2) "><link rel=" Apple-touch-startup-image " sizes=" 1536x2008 " href=" Icon-1536x2008.png " media=" Screen and   (min-device-width: 1025px)  and  (max-device-width: 2048px)  and  (orientation :p ortrait)  and  (-webkit-min-device-pixel-ratio: 2) "><link rel=" Apple-touch-startup-image " sizes=" 1024x748 " href=" Icon-1024x748.png " media=" Screen and   (min-device-width: 481px)  and  (max-device-width: 1024px)  and  (orientation: Landscape) "><link rel=" Apple-touch-startup-image " sizes=" 768x1004 " href=" Icon-768x1004.png " media=" screen and  (min-device-width: 481px)  and  (max-device-width: 1024px)  and  (orientation:portrait) " ><link rel= "Apple-touch-startup-image"  sizes= "640x920"  href= "Icon-640x920.png"  media = "screen and  (max-device-width: 480px)  and  (-webkit-min-device-pixel-ratio: 2)" ><link rel= "Apple-touch-startup-image"  sizes= "320x460"  href= "Icon-320x460.png"  media = "screen and  (max-device-width: 320)" >

Apple-touch-startup-image is used to mark the splash screen, but it's not like Apple-touch-icon can specify sizes to tell the device which picture to use (there is also a claim that sizes recognition has been supported in iOS5. However, there is no successful test, so it can only be identified by the resolution value of the device in media, and the resolution value of the iphone retina is between the values, so it needs to pass the WebKit's private property-webkit-min-device-pixel-ratio : Identifies the pixel density for identification.

The image size of the splash screen is not exactly equal to the size of the device, such as the size of the iPad2 is 1024x768, but its start screen size is 1024x748, the vertical dimension is 768x1004, because you need to subtract the system column height of 20px, The IPhone4 and iPad3 of the retina screen used will need to subtract the height of the status bar by 40px.

Web apps run like the native app, so get rid of some of the Safari's default controls, such as the address bar, status bar, and so on.

<meta name= "apple-mobile-web-app-capable" content= "yes" ><meta name= " Apple-mobile-web-app-status-bar-style "content=" Black "><meta name=" format-detection "content=" Telephone=no " ><meta name= "viewport" content= "width=device-width,initial-scale=1, minimum-scale=1.0, maximum-scale=1, User-scalable=no ">

apple-mobile-web-app-capable is used to define the application for full-screen display, and in the context of defining the apple-mobile-web-app-capable, Setting the property value of the status bar Apple-mobile-web-app-status-bar-style is valid; The value of format-detection is used to enable or disable automatic detection of phone numbers that may appear in a Web page;

Viewport is not a private property of safari, width is used to specify widths, Initial-scale specifies the thumbnail scale of the initialization, Minimum-scale specifies the scaled-down ratio, and maximum-scale is the scaled scale, Of course, these scales depend on user-scalable--Deciding whether the user can scale the page.

Correct:

Although the new ipad has a Retina screen, but the physical resolution is not changed, or 1024x768, so the new ipad in the above code the boot screen code size is wrong, it should be

<link rel= "Apple-touch-startup-image" sizes= "2048x1496" href= "icon-2048x1496.png" media= "screen and ( min-device-width:481px) and (max-device-width:1024px) and (Orientation:landscape) and (- Webkit-min-device-pixel-ratio:2) "><link rel=" Apple-touch-startup-image "sizes=" 1536x2008 "href=" Icon-1536x2008.png "media=" screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation: Portrait) and (-webkit-min-device-pixel-ratio:2) ">

Add an icon to your home screen in iOS and add a splash screen