关于在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浏览器中对触摸事件的响 ...
随机推荐
- Mantis优化改造(功能篇)
共分为两篇,功能篇和技术篇. 时间大约是2016年冬天. 考虑搭一个用于Bug管理和追踪的系统. 综合比较下,选择了小巧的开源工具,Mantis. 在源码基础上,做代码修改,完成了定制版的优化改造. ...
- Mac上搭建直播服务器Nginx+rtmp,实现手机推流、拉流
转载自http://www.cnblogs.com/jys509/p/5649066.html 简介 nginx是非常优秀的开源服务器,用它来做hls或者rtmp流媒体服务器是非常不错的选择,本人在网 ...
- 什么是Servlet容器?(分析很到位)
在本文中,我写了一些关于Web服务器.Servlet容器以及它与JVM的关系的基本概念.我想表达的是,Servlet容器也仅仅不过是一个Java程序. 1. 什么是Web服务器? 想要知道什么是Ser ...
- 132 Palindrome Partitioning II 分割回文串 II
给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串.返回 s 符合要求的的最少分割次数.例如,给出 s = "aab",返回 1 因为进行一次分割可以将字符串 s 分 ...
- VB.NET入门 ANDALSO 和OrElse 之于 AND,OR
Module Module1 Sub Main() Dim x As Integer = 8, y As Integer = 5, z As Integer = 3 Console.WriteLine ...
- 分布式数据存储 之 Redis(二) —— spring中的缓存抽象
分布式数据存储 之 Redis(二) -- spring中的缓存抽象 一.spring boot 中的 StringRedisTemplate 1.StringRedisTemplate Demo 第 ...
- Git之master ->! [rejected] master (non-fast-forward)
出现这个情况可能是在克隆项目的时候强制关闭或者是在pull的时候强制关闭 运行命令:git pull --rebase origin master 然后就可以 git push origin mast ...
- Spring数据访问1 - 数据源配置及数据库连接池的概念
无论你要选择哪种数据访问方式,首先你都需要配置好数据源引用. Spring中配置数据源的几种方式 通过在JDBC驱动程序定义的数据源: 通过JNDI查找的数据源: 连接池的数据源: 对于即将发布到生产 ...
- 1. UI Tests简介
(1) User Interface Testing UI Testing库主要提供了与App中的UI元素进行查找和交互的能力,这使得我们可以通过验证UI元素的状态来测试App是否正常运行. ...
- 洛谷P2742 【模板】二维凸包
题意 求凸包 Sol Andrew算法: 首先按照$x$为第一关键字,$y$为第二关键字从小到大排序,并删除重复的点 用栈维护凸包内的点 1.把$p_1, p_2$放入栈中 2.若$p_{i{(i & ...
