以前我们用过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. 更改web project 访问项目名称

    1.新建web project 2.右键该项目名称------properties 3.访问该项目的URL http://localhost:8806/ssm/.......... 相比书写整个项目名 ...

  2. log4j.xml(信息打印)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE log4j:configuration SY ...

  3. The List ADT

    1.Definiation A list is a sequence.  a0, a1,a2,..., aN (N>0) 2.Character For any list except the ...

  4. js阻止浏览器默认事件

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  5. java 集合中将元素倒序排列

    方法一:实现Comparable接口排序package collsort.comparable; package com.cvicse.sort.comparable; public class Ca ...

  6. getReadableDatabase 和 getWritableDatabase的区别

    (1)getWritableDatabase()方法以读写方式打开数据库.一旦数据库的磁盘空间满了,数据库就只能读而不能写,此时用getWritableDatabase()打开数据库就会出错. (2) ...

  7. vi 使用教程

    编辑一个文本文件是经常使用到的计算机操作.我们想做的大多数事情都需要使用某种文件编辑.文本编辑器会方便文件的创建和修改.编辑一个文本文件是经常使用到的计算机操作.我们想做的大多数事情都需要使用某种文件 ...

  8. UML示例图

  9. JS day01——window对象、执行顺序、线程模型

    1.window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. window ...

  10. POJ3321/Apple tree/（DFS序+线段树）

    题目链接 Apple Tree Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9692 Accepted: 3217 Descr ...