Settings for IOS Web website development, such as necessary icon enlargement, full screen, etc.

Although the native app cannot be developed, you can still use the features of safari in IOS to make a fake web app to satisfy the vanity of the next little.

Since Safari is tossing in iOS, the private attributes used in the Code are basically safari.

Adding an icon to the home screen is the first step of 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">
There are two property values for adding an icon to the screen: Apple-touch-icon and apple-touch-icon-precomposed. The difference is whether the layer highlight automatically added to the icon in IOS is applied.

Because iPhone and iPad have two types of resolution devices, four icons are required: 144x144 (IPAD retina) and 72X72 (IPAD), 114x114 (iPhone retina), 57x57 (iPhone ).

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

If the icon is not enough, you need to add the startup screen:

<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)">
<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 indicates the startup screen, however, unlike Apple-touch-icon, it can specify sizes to tell the device which image to use (there is also a saying that sizes recognition is supported in ios5, but the test is not successful ), therefore, it can only be identified by the device resolution value in media, while the resolution value of iPhone retina is between values, therefore, you must use WebKit's Private Attribute-WebKit-Min-device-pixel-ratio: 2 to identify pixel density for identification.

The image size of the boot screen is not exactly the same as that of the device. For example, the size of ipad2 is 1024 × 768, but the size of the boot screen is 1024 × 748 horizontally and the vertical size is 768 × 1004, the height of the system bar is reduced to 20 PX, while the iPhone 4 and ipad3 of the Retina screen need to be reduced to 40 PX of the status bar.

To run a web app like a native app, remove some default safari controls, such as the address bar and status bar.

<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 full screen display of an application. When Apple-mobile-web-app-capable is defined, the value of apple-mobile-web-app-status-bar-style in the status bar is valid. The value of format-detection is used to enable or disable automatic detection of possible phone numbers on the webpage;

Viewport is not a private property of safari. width is used to specify the width. Initial-scale specifies the scaling ratio of initialization, minimum-scale specifies the scaling ratio, and maximum-scale indicates the scaling ratio, of course, the scaling depends on user-scalable -- determines whether the user can scale the page.

From: http://www.prower.cn/technic/2314

I have just launched a website and want to be indexed as soon as possible. Sorry .. Wuhan Changjiang Institute of Industry and Commerce Co., http://whgszb.com.