说明

  • 利用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端开启引导式访问（具体怎么开启自行搜索）

  • 注意务必要设置一下密码，否则进不去了就只能刷机了
  • 开启引导式访问后，打开主屏幕添加好的网页应用图标，确保正常访问后，点按三次开机键开启引导式访问
  • 大功告成！
关于作者 · AdminI am Yasin, let's talk about these first!

文章评论

还没有评论，欢迎留下第一条回复。