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

最新推荐文章于 2024-04-24 09:27:42 发布
最新推荐文章于 2024-04-24 09:27:42 发布
阅读量292 收藏
点赞数
分类专栏： iOS HTML 文章标签： html 前端 manifest 单页面网页应用 引导式访问 iOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_yasin/article/details/133904103
版权
HTML 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
iOS
2 篇文章 0 订阅
订阅专栏

说明

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

  • 注意务必要设置一下密码，否则进不去了就只能刷机了
  • 开启引导式访问后，打开主屏幕添加好的网页应用图标，确保正常访问后，点按三次开机键开启引导式访问
  • 大功告成！
csdn_yasin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
漂浮HTML代码 单页代码
07-22
漂浮HTML代码 单页代码
单页HTML5网页源码
01-20
简单的单页网页源码，最新的HTML5网页源码，下载了只要修改一下需要修改的文字图片就可以了的
HTML5 离线缓存-manifest简介
hualimeme的专栏
09-01 1048
原文地址 起源 html5之前的网页，都是无连接，必须联网才能访问，这其实也是web的特色，这其实对于PC是时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得降低，比如坐在火车上，过了一个隧道（15分钟），便无法访问网站，这对于web的伤害是很大的，比如对于 《ecmascript合集》这样的为阅读而生的页面。 html5便引入了cache
前端性能优化之“离线缓存manifest”
flying meng的菜鸟居
11-16 5363
在 本专栏 的 这一篇文章 中，给各位引出了一个“不同寻常的”性能体验优化方式 —— 离线缓存，并介绍了它的简单用法，本文来详细说说！ 啥是离线缓存 离线缓存又叫“ApplicationCache”，是从浏览器缓存中分出来一块缓存区，用来存储一定的资源。它是HTML5的新特性。你可以使用它将构成web应用程序的资源，如HTML、css、JavaScript、图片等存储到本地缓存中，这样不仅可以使以后进来时更加方便，还可以在离线状态时“无差别”继续使用web应用！ 离线缓存和普通的浏览器网页缓存有明显的区别
傻傻分不清的Manifest
weixin_33882443的博客
06-05 1049
在前端，说到manifest，其实是有歧义的，就我了解的情况来说，manifest可以指代下列含义： html标签的manifest属性: 离线缓存（目前已被废弃） PWA: 将Web应用程序安装到设备的主屏幕 wbbpack中webpack-manifest-plugin插件打包出来的manifest.json文件，用来生成一份资源清单，为后端渲染服务 webpack中DLL打包时,输出的ma...
pwa学习整理　manifest的配置
zem
11-10 1689
mainfest manifest作为渐进式Web应用程序pwa中的一个核心技术，通过manifest.json来配置，实现了将Web应用程序添加到设备的主屏幕，为用户提供更快的访问和更丰富的体验。 更快体现在放在主屏幕，而更丰富体现在在打开添加到主屏幕的一个缓冲界面及一个自定义的图标。 部署manifest 部署manifest非常容易，首先我们新建一个文件夹，在该文件夹中创建如下目录 in...
HTML5 离线存储实战之manifest（附缓存整个文件夹的方法）
清风的专栏
01-29 2164
转自： http://blog.jnecw.com/?p=490 最近做了一个应用，想要在高级浏览器下离线存储图片以及样式，遂用到了html5的manifest，其中遇到不少问题，写下来总结一下。 demo:http://blog.jnecw.com/demo/id_00012/2.html 首先就是要声明 manifest的mime类型，apache下可以在http
html5超酷单页面,前端：将网站打造成单页面应用SPA（一）
weixin_39929646的博客
06-03 271
前言不知你有没有发现，像Github、百度、微博等这些大站，已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转，然后使用HTML5的新API修改了Url，你可以在F12的Network面板里发现这个秘密。这项技术并没有特别标准的学名，大家都称呼为Pjax，意为PushState + Ajax。这并不完全准确，因为还有Hash + Ajax等方法，但为了方便，我们下文还...
SPA应用最终只有一个HTML文件,前端架构之路（8） - 单页面应用（SPA）、按需加载...
weixin_30253461的博客
06-20 301
单页面应用(SPA)、按需加载1. 多页面应用传统多页面是由后端控制一个 url 对应一个 html 文件，页面之间的跳转需要根据后端给出的 url 跳转到新的 html 上。比如：http://www.example.com/page1 -> path/to/page1.htmlhttp://www.example.com/page2 -> path/to/page2.htmlhtt...
HTML5——history实现单页面
zyz00000000的博客
09-19 2592
1. 单页Web应用（single page web application，SPA） history.back()：URL回退一次 history.forward()：URL前进一次 history.go(n)：URL几次history.back()或几次history.forward()，比如：history.go(2)：两次history.forward()；history.go(-2...
html简单网页代码：学生个人网页单页 WEB静态网页作业模板 大学生个人主页博客网页代码
qq__3200628753的博客
12-21 98
网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
2018Html赞助单页源码美化版
07-06
2018Html赞助单页源码美化版2018Html赞助单页源码美化版2018Html赞助单页源码美化版2018Html赞助单页源码美化版2018Html赞助单页源码美化版2018Html赞助单页源码美化版2018Html赞助单页源码美化版
HTML 手机单页demo
03-06
HTML 手机单页demo，个人中心详情页面；H5详情页面；兼容安卓和苹果系统；
webpack-web-app-manifest-plugin:一个Webpack插件，可生成PWA清单并与资产JSON集成
05-14
webpack-web-app-manifest-plugin webpack-web-app-manifest-plugin是一个Webpack插件，可生成PWA清单并与生成的资产JSON集成。如何安装npm install --save-dev webpack-web-app-manifest-plugin 或者yarn add ...
webpack-assets-manifest：此Webpack插件将生成一个JSON文件，该文件将原始文件名与哈希版本匹配
02-03
这个webpack插件将生成一个JSON文件，该文件将原始文件名与哈希版本匹配。 安装 npm install webpack-assets-manifest --save-dev 版本5的新功能 仅与webpack 5兼容（要求5.1+）。 支持查找。 更新了选项架构以...
pwa-manifest:一个生成工具，可生成Web App Manifest，创建所有必要的图标以及更多内容！
05-14
这曾经只是一个Parcel插件。 该插件仍然存在，位于packages/parcel-plugin-pwa-manifest 。 自从将其模块化以来，（希望）将来能够支持其他构建工具，例如Webpack。 请注意，可在packages/parcel-config-pwa-...
inline-chunk-manifest-html-webpack-plugin：用于html-webpack-plugin的扩展插件，用于内联webpack的块清单。 头标签中的默认内联
02-06
内联块清单HTML Webpack插件 用于扩展插件，联webpack的块清单。 默认为<head>标记中的内联。 输出示例 用于分配全局webpack清单变量的脚本标记，注入到<head> 。 < head > < script > ...
Android代码-android-manifest-parser
08-06
一个纯Java、实现了SAX接口、无任何第三方依赖的 AndroidManifest.xml 解析工具。 AndroidManifest.xml文件格式 Binary AndroidManifest.xml Magic Number(0x00080003) 4bytes // 魔数 File Size 4bytes // 文件...
用html写一个旋转菜单
最新发布
liulang68的博客
04-24 919
【代码】用html写一个旋转菜单。
perl-ExtUtils-Manifest
06-12
perl-ExtUtils-Manifest 是一个 Perl 语言的软件包，它提供了一组用于管理 Perl 模块 MANIFEST 文件的工具。使用 perl-ExtUtils-Manifest 可以方便地生成和更新 Perl 模块的 MANIFEST 文件，以便于进行 Perl 模块的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值