在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浏览器中将网页添加到主屏幕的相关设置(自定义图标,启动动画,自定义名称)的更多相关文章

  1. iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图

    iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...

  2. IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕

    请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...

  3. 利用iOS中Safari浏览器创建伪Web App

    在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...

  4. 当把链接保存到手机桌面。设置图标 只在safari浏览器中有用

    <link rel="apple-touch-icon" sizes="114x114" href="images/logo.png" ...

  5. ios 使用Safari浏览器跳转打开、唤醒app

    常常使用Safari浏览器浏览网页点击url会唤醒该站点的手机版app 须要在app的project中设置 1.打开project中的myapp-Info.plist文件 2.打开文件里新增URL T ...

  6. 如何在ios手机端的Safari浏览器 中“查看网页源代码”

    在这里给大家分享一个很简单的用苹果手机无需越狱就可以查看网页源代码的方法,不过这个方法只用于苹果手机自带的Safari浏览器 随便添加一个safari 书签 (用于一会改为查看源码功能书签)进入书签 ...

  7. mac的safari浏览器调试ios手机网页

    iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...

  8. 用mac的safari浏览器调试ios手机的网页

    iOS 6给Safari带来了远程的Web检查器工具. 一.参考链接 ios开发者文档 safari开发者工具 remote debugging safari 二.设置iphone 设置 -> ...

  9. safari浏览器click事件要点击两次才有响应出现闪烁

    闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...

随机推荐

  1. PHP 使用 header 方式实现文件下载功能

    header() 函数向客户端发送原始的 HTTP 报头. 下载文件要用的的请求头: header("Content-type:application/octet-stream") ...

  2. the little schemer 笔记(1)

    第 1 章 玩具 这是原子atom吗?atom是的,因为atom是一个字母a开头的字符串. 这是原子atom吗?turkey是的,因为atom是字母开头的字符串. 这是原子atom吗?1492是的,因 ...

  3. Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Final)

    考场上只做出了ABDE C都挂了... 题解: A 题解: 模拟 判断前面一段是否相同,后面一段是否相同,长度是否够(不能有重叠) Code: #include<stdio.h> #inc ...

  4. 大数模板 (C ++)

    上次BC遇到一个大数题目,没有大数模板和不会使用JAVA的同学们GG了,赛后从队友哪里骗出大数模板.2333333,真的炒鸡nice(就是有点长),贴出来分享一下好辣. //可以处理字符串前导零 #i ...

  5. C. Jon Snow and his Favourite Number DP + 注意数值大小

    http://codeforces.com/contest/768/problem/C 这题的数值大小只有1000,那么可以联想到,用数值做数组的下标,就是类似于计数排序那样子.. 这样就可以枚举k次 ...

  6. RAID基础

    磁盘类型 类型 IDE Integrated Drive Electronics SATA Srial ATA SCSI Small Computer System Interface FC Fibe ...

  7. RHEL 6.5----SCSI存储

    主机名 IP master 192.168.30.130 node-1 192.168.30.131 node-2 192.168.30.132 安装并启动 [root@master ~]# ll / ...

  8. oracle常用数据类型&约束条件(及案例)

    一.数据类型 数据类型 说明 数字 number [小数,整数] number(5,3)表示总共5个数字,小数点后3个,最大值99.999 number(5) 表示整数  最大值99999    字符 ...

  9. webfrom ASP开发基础跟模式

    ASP.NET - .net开发网站应用程序的技术总称 ASP WebForm           MVC   是ASP.NET的两个技术方法 WebForm类似于WinForm,可视化操作 MVC类 ...

  10. 【学习笔记】深入理解js原型和闭包(4)——隐式原型

    注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设计(第三版)>第6章:面向对象的程序设计. 上节已经提到 ...