webapp之路--apple私有属性apple-touch-icon

时间 2019-11-18

标签 webapp 之路 apple 私有属性 touch icon 栏目无线繁體版

原文原文链接

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

[html] view plain copy

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

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

[html] view plain copy

<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的高分辨率。app

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

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.iphone

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

57 x 57 pixels网站
114 x 114 pixels (high resolution)ui

For iPad, both of these sizes are required:this

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

因此最完善的写法应该是：

[html] view plain copy

<link rel="apple-touch-icon" sizes="57x57" 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" />
<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就会根据状况自动进行缩放了。

[html] view plain copy

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