代码整理-利用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端开启引导式访问（具体怎么开启自行搜索）
- 注意务必要设置一下密码，否则进不去了就只能刷机了
- 开启引导式访问后，打开主屏幕添加好的网页应用图标，确保正常访问后，点按三次开机键开启引导式访问
- 大功告成！