关于在Safari浏览器中将网页添加到主屏幕的相关设置(自定义图标,启动动画,自定义名称)
在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样
第一步:

第二步:

第三步:

到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生的app
自定义图标和app名称
在你的index.htm里面加上如下代码
<!-- 自定义应用名称 -->
<meta name="application-name" content="百度一下">
<!-- 自定义图标 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="%PUBLIC_URL%/icon.ico">
5 这里会有一个app图标尺寸问题一般使用120*120,当然对于不同的设备会用不同的尺寸对应:下面是详细尺寸
<!-- 网站开启对 web app 程序的支持 具体表现为去除浏览器地址栏和底部导航栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明(会占据屏幕的约20px,不同的设备可能会有差异)-->
<!-- 在定义了apple-mobile-web-app-capable的前提下,设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效; -->
<meta name="apple-mobile-web-app-status-bar-style" content="default"> <!-- apple-touch-startup-image用来配置启动动画 -->
<!-- 这里要注意,这里图片的尺寸要和设备的静态图片显示尺寸完全对应,差一个像素都会导致启动动画无法显示 -->
<!-- 下面列举了iPhone的所有尺寸(ps:为了方便大家就全部贴出来了!!) -->
<!-- iPhone 678 startup image @2x-->
<link href="%PUBLIC_URL%/750x1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 678p startup image @3x-->
<link href="%PUBLIC_URL%/1242x2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPhone X Xs startup image @3x-->
<link href="%PUBLIC_URL%/1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">
<!-- iPhone XR startup image @2X -->
<link href="%PUBLIC_URL%/828x1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone XR Max startup image @3x-->
<link href="%PUBLIC_URL%/1242x2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image">

以上就是全部设置
关于在Safari浏览器中将网页添加到主屏幕的相关设置(自定义图标,启动动画,自定义名称)的更多相关文章
- iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图
iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...
- IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕
请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...
- 利用iOS中Safari浏览器创建伪Web App
在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...
- 当把链接保存到手机桌面。设置图标 只在safari浏览器中有用
<link rel="apple-touch-icon" sizes="114x114" href="images/logo.png" ...
- ios 使用Safari浏览器跳转打开、唤醒app
常常使用Safari浏览器浏览网页点击url会唤醒该站点的手机版app 须要在app的project中设置 1.打开project中的myapp-Info.plist文件 2.打开文件里新增URL T ...
- 如何在ios手机端的Safari浏览器 中“查看网页源代码”
在这里给大家分享一个很简单的用苹果手机无需越狱就可以查看网页源代码的方法,不过这个方法只用于苹果手机自带的Safari浏览器 随便添加一个safari 书签 (用于一会改为查看源码功能书签)进入书签 ...
- mac的safari浏览器调试ios手机网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
- 用mac的safari浏览器调试ios手机的网页
iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...
- safari浏览器click事件要点击两次才有响应出现闪烁
闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...
随机推荐
- A. Banana (2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛)
题目大意是有一堆猴子,然后每个猴子都有自己喜欢的香蕉类型,然后香蕉会在指定的位置,问每个猴子能不能在每个地方吃到自己喜欢的香蕉. 其实直接暴力即可(因为最大最大最大是50) 上代码: #include ...
- the little schemer 笔记(1)
第 1 章 玩具 这是原子atom吗?atom是的,因为atom是一个字母a开头的字符串. 这是原子atom吗?turkey是的,因为atom是字母开头的字符串. 这是原子atom吗?1492是的,因 ...
- 接口测试postman和Jmeter
接口测试属于功能测试的范畴,一般来说分为两种,一种是程序内部的接口,一种是系统对外的接口. postman测试接口 1. get请求: (1) 直接在浏览器中输入接口地址+?+参数 (2)使用post ...
- Educational Codeforces Round 19 C
Description Petya recieved a gift of a string s with length up to 105 characters for his birthday. H ...
- 一个因xdata声明引起的隐含错误
我们知道一般增强型c51自身的RAM只有128BYTES,根本不够用,所以一般在定义全局变量,静态变量时都要用XDATA作为关键字修饰数据的的存储类型.但要注意的是,定义和声明一定要一致,不然出现错误 ...
- Windows下Apache应用环境塔建安全设置(目录权限设置)
目的:为Apache,php配置受限制的用户权限.保护系统安全.需要的朋友可以参考下. 环境配置情况: apache安装目录:d:\www-s\apache php目录:d:\www-s\php5 m ...
- AJPFX总结OpenJDK 和 HashMap大量数据处理时,避免垃圾回收延迟的技巧二
HashMap简史 “Hash Code”这个概念第一次出现是在1953年1月的<Computing literature>中,H. P. Luhn (1896-1964) 在一篇 IB ...
- 洛谷P2764 最小路径覆盖问题(二分图)
题意 给出一张有向无环图,求出用最少的路径覆盖整张图,要求路径在定点处不相交 输出方案 Sol 定理:路径覆盖 = 定点数 - 二分图最大匹配数 直接上匈牙利 输出方案的话就不断的从一个点跳匹配边 # ...
- 应用开始界面简单倒计时的dialog
activity_main.xml 下面图片显示的还要在activity_main.xml里面加个TextView <?xml version="1.0" encoding= ...
- Hibernate中的inverse和cascade属性
Hibernate中的inverse和cascade属性 inverse的值有两种,"true"和"false".inverse="false&quo ...
