First of all, this paper is extracted from CSDN

If you’re building your own system, the only thing you want is to be loved and collectible.

In ios, you can add web applications to the desktop. It just generates an icon on the system desktop just like any other app that you download from the app store.

But you’ll notice when you add your site to the system desktop. This icon turns out to be a screenshot of the page. It’s not high-end, it’s not classy. What can I do about it?

Then you need to revamp your Web application!!

The first step is to add it to your HTML file. If you’re developing using the VUE framework, you’ll need to add it to your index.html file

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="Your image path.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="Your image path.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="Your image path.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="Your image path.png">
Copy the code

There are two types of attributes that add ICONS to the screen: Apple-touch-icon and Apple-touch-icon-precomposed. The difference is whether or not the layer of highlights that iOS automatically adds to ICONS is applied.

Since there are two resolutions for iPhone and iPad, you need to make four ICONS: 144×144(iPad Retina), 72×72(iPad), 114×114(iPhone Retina), and 57×57(iPhone).

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

What if you think adding your own icon isn’t enough?

You can also add a startup animation to your application

<link rel="apple-touch-startup-image" sizes="2048x1496" href="Your image path.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="Your image path.png" media="screen and (min-device-width: 1025px) and (max-device-width: 2048px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" sizes="1024x748" href="Your image path.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="Your image path.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="Your image path.png" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">
Copy the code

Apple-touch-startup-image is used to indicate the splash screen, but unlike apple-touch-icon, which specifies sizes to tell the device which image to use (there is also a case for sizes being supported in iOS5 but not tested successfully), Therefore, it can only be identified through the judgment value of device resolution in media, while the resolution value of iPhone Retina is bounded between the values. Therefore, it is necessary to identify pixel density through webKit’s private attribute – Webkit-min-device-Pixel-ratio :2.

The size of the splash screen is not exactly equal to the size of the device. For example, the size of the iPad2 is 1024×768, but its splash screen size is 1024×748 horizontally and 768×1004 vertically, because the height of the system bar needs to be subtracted 20px. For the Retina display iPhone4 and iPad3, subtract 40px from the status bar.

For Web apps to behave like Native apps, you need to remove some of Safari’s default 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, the maximum - scale = 1, the user - scalable = no">
Copy the code

Apple-mobile-web-app-capable is used to define full-screen display of applications; If apple-mobile-web-app-capable is defined, the apple-mobile-web-app-status-bar-style attribute of the status bar is valid only. The value of format-detection is used to enable or disable automatic detection of phone numbers that may appear on a web page;

Viewport is not private to Safari. Width specifies the width, initial-scale specifies the size of the initializer, minimum-scale specifies the size of the initializer, and maximum-scale specifies the size of the magnification. Of course, all of this scaling depends on user-scalable — whether or not the user can scale the page.

Correction:

Although the New iPad has Retina screen, the physical resolution is actually the same as 1024*768. Therefore, the code size of the boot screen of the New iPad in the above code is wrong, which 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)">
Copy the code

Prevents you from clicking on a link in the iOS Web APP to jump to a new TAB in Safari

Safari on iOS have the function of a “send to” screen (though many small white users do not know this), the user can be the website URL in the form of a shortcut added to the main screen, display form with the native application is the same and maximize the simulated the effect of the native APP, however, found a problem now, When you click on the home screen to access a Web app-like page, clicking on any link will take you to Safari and create a new TAB to open the link.

Problem solving:

<script type="text/javascript">
// There is a problem in iOS Web APP clicking the link to jump to a new TAB in Safari
//stanislav.it/how-to-prevent-ios-standalone-mode-web-apps-from-opening-links-in-safari
if(("standalone" in window.navigator) && window.navigator.standalone){
var noddy, remotes = false;
document.addEventListener('click'.function(event) {
noddy = event.target;
while(noddy.nodeName ! = ="A"&& noddy.nodeName ! = ="HTML") {
noddy = noddy.parentNode;
}
if('href' in noddy && noddy.href.indexOf('http')! = =- 1 && (noddy.href.indexOf(document.location.host) ! = =- 1 || remotes))
{
event.preventDefault();
document.location.href = noddy.href; }},false);
}
</script>Copy the code

Welcome to my blog and github!

My blog: http://blog.luyu.fun

My github:https://github.com/panyu97py