如何把网站添加到手机主屏幕 website Add to Home Screen

website Add to Home Screen (如何把网站添加到手机主屏幕 )

HTML页面添加

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="应用名字">
<link rel="apple-touch-icon" href="acuconf_rtc.png">
<link rel="apple-touch-icon" type="image/png" sizes="57x57" href="app_logo.png" />
<link rel="apple-touch-icon" type="image/png"  sizes="72x72" href="app_logo.png" />
<link rel="apple-touch-icon" type="image/png"  sizes="114x114" href="app_logo.png" />
<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="app_logo.png" />
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="manifest.json" />

mainfest.json文件

{
  "short_name": "应用名字简写,
  "name": "应用名字",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "acuconf_rtc.png",
      "type": "image/png",
      "sizes": "32x32"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

参考教程

• Safari Web Content Guide
• Add to Home screen
  
• Add a web app manifest
• Making Fullscreen Experiences