4
苹果网站图标apple-touch-icon使用详解
source link: https://blog.p2hp.com/archives/10769
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
苹果网站图标apple-touch-icon使用详解 | Lenix Blog
在iPhone、iPad、iTouch的Safari上可以使用添加到主屏按钮将网站添加到主屏幕上。apple-touch-icon是IOS设备的私有标签，如果设置了相应apple-touch-icon标签，则添加到主屏上的图标会使用指定的图片。在<head></head>区域加入下面代码即可。
<link rel="apple-touch-icon"href="/qz.png"/>
分别放置57x57（默认值）的图标对应320x640的老设备，72x72对应ipad，114x114对应retina屏的iPhone及iTouch。
官方说明图片格式为png，图片无需做圆角处理，同Native App一样，系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果，可以用apple-touch-icon-precomposed代替apple-touch-icon。
图标搜索的优先级如下：
- 如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。
- 如果没有比推荐尺寸大的图标，会优先选择最接近推荐尺寸的图标。
- 如果有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。
如果未在区域指定用link标签指定图标，会自动搜索网站根目录下有apple-touch-icon…或者 apple-touch-icon-precomposed…前缀的图标。 如设备推荐尺寸为57x57，优先级如下：
- apple-touch-icon-57x57-precomposed.png
- apple-touch-icon-57x57.png
- apple-touch-icon-precomposed.png
- apple-touch-icon.png
便捷的方法，可以直接设置一个最大尺寸的图标，如使用一个114x114大小的图标，在iPhone4以及iPad2上都可以正常显示。以上内容在iPhone4以及iPad2上测试通过。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK