以前我们用过favicon在浏览器给网站进行身份标识，用法如下：

  1. <link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />
  2. <link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />

现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。

  1. <link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 标签支持sizes属性，可以用来放置对应不同的设备。

57×57（默认值）的图标对应320×640的iphone老设备，72×72对应ipad，114×114对应retina屏的iPhone及iTouch。ipad3对应144×144的高分辨率。

这是官方开发社区的详细介绍：

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

  • 57 x 57 pixels

  • 114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

  • 72 x 72 pixels

  • 144 x 144 (high resolution)

When iOS displays your app icon on the Home screen of a device, it automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:

  • Rounded corners

  • Drop shadow

  • Reflective shine (unless you prevent the shine effect)

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).

Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:

Has 90° corners

Does not have any shine or gloss

所以最完善的写法应该是：

  1. <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
  2. <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
  3. <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
  4. <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />

虽然官方都用的png图片做说明，但实际测试jpg格式也可用（不推荐），图片无需做圆角和高光效果，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon，这时我们提供的图标就要自己做圆角和高亮效果了。

图标搜索的优先级如下：

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。

如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。

如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon...或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57,优先级如下：

apple-touch-icon-57×57-precomposed.png

apple-touch-icon-57×57.png

apple-touch-icon-precomposed.png

apple-touch-icon.png

在第三代 iPad 上有四种图标规格： 57x57, 72x72, 114x114, 144x144.

由于 retina 图标的尺寸是标准图标大小的2倍，因此实际上我们只需要只做2款图标即可：114 x 114 和 144 x 144 。 将retina 图标的大小设置成标准图标的尺寸，那么IOS就会根据情况自动进行缩放了。

    1. <!-- Standard iPhone -->
    2. <link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
    3. <!-- Retina iPhone -->
    4. <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
    5. <!-- Standard iPad -->
    6. <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
    7. <!-- Retina iPad -->
    8. <link rel="apple-touch-icon" sizes="144x144" href="touch-icon-

webapp之路--apple私有属性apple-touch-icon的更多相关文章

  1. Python3学习之路~6.5 私有属性和私有方法

    属性分为静态属性和动态属性,静态属性就是变量,动态属性就是方法.但是一般我们说的属性就是变量,方法就是方法.私有属性/方法就是外面访问不了,只有自己能够访问的属性/方法.如何将属性和方法分别变成私有属 ...

  2. webapp之路--之ios上图标

    以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...

  3. iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式

    目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...

  4. day16-封装(私有静态属性、私有属性、私有方法、类方法、静态方法)

    # 一: class P: __age = 30 #私有静态属性 def __init__(self,name): self.__name = name #私有属性:属性名前面加上双下划线是私有属性. ...

  5. JavaScript中的私有属性

    一.使用构造函数获得私有属性: function Gadget(){ var name = 'iPod'; this.getName = function(){ return name; }; }; ...

  6. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  7. 浏览器 私有属性&内核

    -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome.safari私有属性 IE使用的是Trident内核,Firefox 使用的是Gecko内核.目 ...

  8. java中的反射，知道类名创建类，还可以设置私有属性的值

    刚刚学到了反射,感觉反射的功能好强大,所以想写篇博客记录下自己的学习成果. 利用反射来创建对象. Class c1=Class.forName("test.Person");//通 ...

  9. scala 学习笔记(04) OOP（上）主从构造器/私有属性/伴生对象(单例静态类)/apply方法/嵌套类

    一.主从构造器 java中构造函数没有主.从之分,只有构造器重载,但在scala中,每个类都有一个主构造器,在定义class时,如果啥也没写,默认有一个xxx()的主构造器 class Person ...

随机推荐

  1. openwrt 中make的使用

    make 命令简单说明 make V=99 V=99表示输出详细的debug信息 make world 表示编译所有 make j=2 V=99 如是多核CPU,加j=2 选项理论上能加快编译速度 m ...

  2. SharePoint2013 Set Value To PeoplePicker

    var columnName = 'Display Name';var userName = 'domain\\name';var searchText = RegExp("FieldNam ...

  3. 【超级干货】手机移动端WEB资源整合：转载

    转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽 ...

  4. restlet不能接受angular post过来的数据

    修改header create: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded'} }

  5. 关于stringWithFormat: - 两段NSString如何合成一段

    http://blog.sina.com.cn/s/blog_6b1e4a0601019pib.html str = [NSString stringWithFormat:@"%@,%@&q ...

  6. Java操作PDF之itext入门

    转载:http://lichunhui.iteye.com/blog/1550584 iText是著名的开放项目,是用于生成PDF文档的一个java类库.通过iText不仅可以生成PDF或rtf的文档 ...

  7. SB淘宝api的奇葩问题! 一则服务器无法访问淘宝api

    <?xml version="1.0" encoding="utf-8" ?><error_response><code>3 ...

  8. zf-关于评价器的开关所在的配置文件，与代码如何修改。

    web.xml文件  把true改成false就是关

  9. mysql具体语句示例

    建表:(not null ,auto_increment, unique , primary key) create database balfish;use balfish;create table ...

  10. HDU 2255 奔小康赚大钱 KM算法的简单解释

    KM算法一般用来寻找二分图的最优匹配. 步骤: 1.初始化可行标杆 2.对新加入的点用匈牙利算法进行判断 3.若无法加入新编,修改可行标杆 4.重复2.3操作直到找到相等子图的完全匹配. 各步骤简述: ...