Html WebApp使用rel apple-touch-icon属性详解
2015-06-09 09:06:42  By: dwtedx

简介

现今移动设备越来越多、苹果为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的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+