IOS HTML5 adds icons to the home screen

Adapt to the screen size and remove the address bar and status bar of safari

<meta name="viewport" content="width=device-width,
		initial-scale=1,maximum-scale=1,user-scalable=no">
<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">

Set the icons added to the home screen

apple-touch-icon Both  apple-touch-icon-precomposedicons can be set, so what does the extra precomposed one mean? Without precomposed code, special effects including rounded corners, shadows, and reflections are automatically added to the generated native app logo. It started from iOS 2.0, but now with the emergence of iOS7, it has become dispensable;

<!-- 自定义各种尺寸图标 ,这里偷懒一下就用一张 -->
<link rel="apple-touch-icon-precomposed" 
      sizes="144x144" href="imgs/icon.png">
<link rel="apple-touch-icon-precomposed" 
      sizes="114x114" href="imgs/icon.png">
<link rel="apple-touch-icon-precomposed" 
      sizes="72x72" href="imgs/icon.png">
<link rel="apple-touch-icon-precomposed" 
      sizes="57x57" href="imgs/icon.png">

Set startup page

At present, it cannot be displayed on ios9, and the specific reason has not been found yet. If you know the solution, please tell me, thank you!

<!-- 添加启动页 ios9暂无法显示 -->
<!-- iPhone -->
<link href="imgs/splash-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) 
          and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="imgs/splash-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) 
          and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="imgs/splash-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) 
          and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iOS 8 iPhone 6 (portrait) -->
<link href="imgs/splash-750x1294.png"
      media="(device-width: 375px) and (device-height: 667px) 
          and (orientation: portrait) 
          and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iOS 8 iPhone 6 (landscape) -->
<link href="imgs/splash-710x1334.jpg"
      media="(device-width: 375px) and (device-height: 667px) 
          and (orientation: landscape) 
          and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image" >
<!-- iOS 8 iPhone 6 Plus (portrait) -->
<link href="imgs/splash-1242x2148.jpg"
      media="(device-width: 414px) and (device-height: 736px) 
      	  and (orientation: portrait) 
      	  and (-webkit-device-pixel-ratio: 3)"
      rel="apple-touch-startup-image" >
<!-- iOS 8 iPhone 6 Plus (landscape) -->
<link href="imgs/splash-1182x2208.jpg"
      media="(device-width: 414px) and (device-height: 736px) 
          and (orientation: landscape) 
          and (-webkit-device-pixel-ratio: 3)"
      rel="apple-touch-startup-image" >
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

Popup to add to home screen prompt

A third-party plug-in is used here: GitHub - cubiq/add-to-homescreen: Add to home screen call-out for mobile devices     supports android and ios. Check the detailed usage by yourself, the following is just a simple use on ios.

<!-- 添加提示插件 -->
<link rel="stylesheet" type="text/css" 
    href="addToHomescreen/css/addtohomescreen.css">
<script src="addToHomescreen/js/addtohomescreen.js"></script>

<script>
    <!-- 清除session,每次都弹出提示 -->
    addToHomescreen.removeSession();
    addToHomescreen();
</script>