iOS Webapp的桌面图标及更新

iOS允许网站开发者像NativeApp一样在iOS设备的主屏幕为其网站添加一个启动Icon,这个代表着网站的Icon在苹果官方开发者文档里被称为“Web Clip”,它的作用类似于桌面浏览器的书签,用户通过点击Icon能直接快速打开这个url的网站。

为了给某个网页或者整个网站指定一个漂亮的桌面启动图标,iOS Safari提供了两个私有接口: apple-touch-icon 和 apple-touch-icon-precomposed。


/ Apple-touch-icon

设置方法

通过在页面HTML的头部添加 <link> 标签
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-precomposed.png" />


这两个标签都是用来指定桌面图标的,但两者有个细微的区别,
•通过 apple-touch-icon 添加的图标是会带iOS图标统一的高光效果
•通过 apple-touch-icon-precomposed 添加的图标则是设计原图,不带高光渐变效果的。

图片大小

为了给不同的iOS设备指定其启动图标,在iOS Human Interface Guide中提到,推荐以下四种尺寸:
 

相应地,要指定不同分辨率的设备的图标,可以添加相应的 <link> 标签序列,官方建议的顺序是这样的:
<link rel="apple-touch-icon" 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-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />


通过 <link> 的 <sizes> 属性可以特别地声明这个图标是为哪种分辨率设备准备的,如果没有指明 <sizes> 属性的大小,则默认值为57×57。

如果所有的 <link> 标签序列中都没有符合官方推荐的最适尺寸的话,那么iOS会从所有比推荐的最适尺寸大的图标中选择尺寸最小的那一个,如果所有的 <link> 标签序列中的图标都比当前推荐的最适尺寸小的话,iOS会从这些图片中自动选择最大的那个来作为启动图标。

特别地,如果整个页面都没有指定任何的 apple-touch-icon 的图标的话,iOS则会自动去网站根目录寻找有 apple-touch-icon 和 apple-touch-icon-precomposed 前缀的图标文件。

原文出处:http://www.cocoachina.com/gamedev/misc/2013/0521/6249.html

猜你喜欢

转载自siruoxian.iteye.com/blog/1873197