将网站添加到iPhone的主屏幕上
我之前有篇文章介绍过如何将网站固定到Windows的开始菜单,并可以自定义图标、颜色以及Windows推送通知,其实Apple也有类似的功能,通过在网页的head部分添加link标记,在Safari浏览器中我们可以轻易地将网站添加到iPhone的主屏幕,使它看起来就像一个普通的app一样。
要实现该功能很简单,只需要在你网站的根目录下放一张名为"apple-touch-icon.png"的图片即可,像添加favicon一样(将名为"favicon.ico"的图标放在网站的根目录下,浏览器会自动加载并显示网站的图标)。
如果需要精确控制,添加下面的代码:
1. 在网页的head部分添加以下代码,其中href属性值为图片的路径。
<link rel="apple-touch-icon" href="/custom_icon.png"/>
2. 为满足不同分辨率设备的显示效果,可以添加三个不同分辨率的图片:57 x 57像素用于前三代iPhone和iPod Touch,72 x 72像素用于iPad,114 x 114像素用于采用Retina display的iPhone4和iPod Touch等后续产品。通过sizes属性控制:
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
3. 另外,通过将rel属性的值修改成"apple-touch-icon-precomposed"来避免iOS将图标添加高光效果。
将网站添加到iPhone的主屏幕上的更多相关文章
- 关于在Safari浏览器中将网页添加到主屏幕的相关设置(自定义图标,启动动画,自定义名称)
在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像native那样 第一步: 第二步: 第三步: 到这里还没结束:我们还要进行相关设置才能使我们的应用更像原生 ...
- 创建ipadWEB应用程序到主屏幕
1.webkit内核中的一些私有的meta标签,这些 meta标签在开发webapp时起到非常重要的作用 (1)<meta content="width=device-width; i ...
- iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图
iPhone 收藏网址[添加到书签] 和 [添加到主屏幕] 显示自定义图标,而不是网页截图: <!-- Safari浏览器[添加到书签] --> <link rel="sh ...
- iOS中为网站添加图标到主屏幕以及增加启动画面
虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的. 既然是在iOS中的Safari折腾的,那么代码中利用到 ...
- IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕
请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...
- c# 多显示器设置主屏幕(Set primary screen for multiple monitors)
原文 http://www.cnblogs.com/coolkiss/archive/2013/09/18/3328854.html 经过google加各种百度,终于找到了一个有效的解决方案,下面是两 ...
- [译]:Orchard入门——给网站添加页面
原文链接:Adding Pages to Your Site 注:内容为官方文档翻译,本人遇到的page中间是布局,而非官网的body--但此内容可以在内容定义里自行修改(本文不做介绍) 在创建Orc ...
- 转载:iPhone 6 Plus 屏幕宽度问题 375 vs 414
首先看一张比较简单明了的 iPhone 6 与 iPhone 6 Plus 对比图,来自 PaintCode 的<The Ultimate Guide To iPhone Resolutions ...
- iPhone手机的屏幕尺寸、分辨率及适配
1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS ...
随机推荐
- (python) 标准模块sys和os的使用
一.sys模块 包含了系统的相关的功能.我们来学习sys.argv,它包含命令行参数. 例子:定义了一个add函数,用来实现两个整数的相加. #! coding=utf-8 # usersys.py ...
- 实验七 Web应用测试
实验目的 (1) 了解Web应用测试的特点 (2) 掌握SSH分层单元测试 实验内容 以下题目均在bookstore项目上完成(请先运行数据库文件): 1.编写单元测试用例,对 ...
- cnavas
1.创建一个画布eg:<cnavas width=100px;height=100px; style="border:1px solid rgba(242 ,54,33,0.1)&qu ...
- 判断是否是有效的IPV4地址
参考链接: https://blogs.msdn.microsoft.com/oldnewthing/20060522-08/?p=31113 http://www.cnblogs.com/txw19 ...
- 攻破JAVA NIO技术壁垒
转载自攻破JAVA NIO技术壁垒 概述 NIO主要有三大核心部分:Channel(通道),Buffer(缓冲区), Selector.传统IO基于字节流和字符流进行操作,而NIO基于Channel和 ...
- RocksDB笔记 - Compaction中的Iterator
Compaction中的Iterator 一般来说,Compaction的Input涉及两层数据的合并,对于涉及到的每一层数据: 如果是level-0,对level-0的每一个sstable文件建立一 ...
- JSF中使用jquery拦截ajax请求
jsf提供一个内置的jsf.ajax.request方法给我们使用,如果在jquery中使用,则需要做一些更改. 此处因为使用jquery,所以可以不必在控件中添加onclick方法了,可以给控件配 ...
- 如何将动态生成Word文件
大致的思路是先用office2003或者2007编辑好Word的样式,然后另存为XML,将XML翻译为FreeMarker模板,最后用Java来解析FreeMarker模板并输出Doc.经测试这样方式 ...
- CentOS详解top命令各个数据的含义
最近在docker(宿主机是centos虚拟机)里安装gitlab,发现随着时间的运行,虚拟机的内存持续走高,运行几个小时之后内存已经爆掉了,putty远程处理于假死状态. 这个时候就需要查看内存进程 ...
- CSS3学习笔记
1.Tranform 转换(2D,3D) 2D: div { margin:30px; width:200px; height:100px; background-color:yellow; /* R ...