Html WebApp使用rel apple-touch-icon属性详解
简介
现今移动设备越来越多、苹果为iOS设备配备了apple-touch-icon私有属性、添加该属性、在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上、方便用户以后访问、实现方法是在HTML文档的<head>标签加入下面代码即可
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
apple-touch-icon 标签支持sizes属性、可以用来放置对应不同的设备、分别放置57×57（默认值）的图标对应320×640的老设备、72×72对应ipad、114×114对应retina屏的iPhone及iTouch、由于手头没有iPad3、所以没测试是否支持144×144的图标在iPad3上的显示
虽然官方都用的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
各尺寸自适应代码
默认：57x57、iPad：72x72、iPhone 4,Retina屏：114x114（原尺寸的2倍）
<link rel="apple-touch-icon" href="/icon.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/icon-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/icon-114x114.png" />
只要做好相应尺寸的代码、加到页面里面就可以每个主屏幕上都会完美显示啦
推荐阅读