IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕
2024-08-29 18:33:37
请注意!!!使用了【全屏模式之后】。页面的顶部会空出一大块。而且这并不属于margin,padding,或者定位。就是单纯的空出来非常难调试。其实坑就是这里
在 iPhone「添加到主屏幕」时显示自定义图标
测试资源下载:https://github.com/dragon8github/mobile-boilerplate/tree/master/img/touch
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png"> <!-- IOS 主屏幕应用全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 安卓 主屏幕应用全屏 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- IOS默認的時間、電池、供應商等信息 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
</body>
</html>
效果演示(Safari浏览器才支持【添加到主屏幕】,坑爹的UC浏览器不支持):
在桌面显示的是自定义的ICO图标
由于加入了<meta name="apple-mobile-web-app-capable" content="yes">
所以通过桌面启动的网站是全屏显示的(隐藏了浏览器的地址栏和工具栏,加载状态栏等)
最新文章
- Java中,关于字符串类型、随机验证码、 时间类型
- php获取当月天数及当月第一天及最后一天、上月第一天及最后一天实现方法
- 简单的OkHttp使用介绍
- 酶设计软件rosetta安装
- 盘点 Github 所用到的开源项目
- ajax弹出窗口
- C++内存泄露的有效预防方法:谁使用,谁删除 (1.2)
- Timus 1180. Stone Game 游戏题目
- Scala 安装 Exception in thread ";main"; java.lang.VerifyError: Uninitialized object exists on backward branch 96
- java web面试题
- delete操作字符串会报错吗?
- Leetcode_12_Integer to Roman
- Asp.Net路由重写为用户名或者ID
- 解决 jdk8 Illegal key size or default parameters 错误
- CentOS 6.5环境下使用HAProxy+apache实现web服务的动静分离
- iOS中UITableView的一些问题思考
- 腾讯开源极限渲染js模板链接
- JMS学习(四)-一个简单的聊天应用程序分析
- BZOJ 3621: 我想那还真是令人高兴啊 计算几何 复数
- Python笔记初识
热门文章
- hihocoder 1288 : Font Size (微软2016校园招聘4月在线笔试)
- JS零基础一步一步做应用全记录
- 你家的Wifi密码安全吗?
- Javascript时间字符串比较
- jquery中remove()与detach()的区别
- iOS:分段控件UISegmentedControl的详细使用
- jquery 获取标签名(tagName)
- poj3592 Instantaneous Transference tarjan缩点+建图
- Maven C盘用户文件下没有.m2
- (转)intellij idea svn 修改文件后,父文件夹也标注修改