代码整理-利用HTML的manifest属性创建一个单页面可全屏网页应用

说明

• 利用HTML的manifest属性创建一个单页面可全屏网页应用
• 使用场景：
  • 做一个网站页面在iPad上演示该页面并且限制操作者只能在当前页面点击不可切换页面，也不可切换应用
• 解决方案：
  • 在页面中加入manifest属性，开启单页面特性
  • 利用iOS设备的引导式访问，限制只能在一个应用中操作

操作

准备工作（做一个页面，并将该页面部署到web服务器中）

• HTML部分

  <!DOCTYPE html>
  <html>
  <head>
  	<meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  	<!-- favicons -->
      <!-- <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> -->
      <!-- <link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png"> -->
      <!-- <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> -->
      <!-- <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> -->
      <!-- <link rel="mask-icon" href="safari-pinned-tab.svg" color="#0048a5"> -->
      <!-- <meta name="theme-color" content="#ffffff"> -->
      <link rel="manifest" href="manifest.json">
  
  	<title>单页面可全屏网页应用</title>
  </head>
  <body>
  	<div style="width: 100%;height: 2000px;background-color: #666;text-align: center;">
  		这是页面内容
  	</div>
  </body>
  </html>

• manifest.json文件

  {
      "name": "",
      "icons": [],
      "theme_color": "#ffffff",
      "background_color": "#ffffff",
      "display": "standalone"
  }

iOS设备访问该页面并添加到主屏幕

• 务必使用iOS自带的Safari浏览器访问
• 正常访问页面后，点击分享->添加到主屏幕
• 此时iOS设备主屏幕就会多一个网页应用图标，其实就是一个书签

iOS端开启引导式访问（具体怎么开启自行搜索）

• 注意务必要设置一下密码，否则进不去了就只能刷机了
• 开启引导式访问后，打开主屏幕添加好的网页应用图标，确保正常访问后，点按三次开机键开启引导式访问
• 大功告成！