Html WebApp使用rel apple-touch-icon属性详解
2015-06-09 09:06:42 By: shinyuu
简介
现今移动设备越来越多、苹果为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" />
只要做好相应尺寸的代码、加到页面里面就可以每个主屏幕上都会完美显示啦
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）
或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛
IMJMJ.COM小爱卖家 2023-01-11 16:57:59 1 评 | 回复
学习学习了：）感谢分享！