Android中处理apple-touch-icon详解
苹果的TouchIcon相对我们都比较熟悉,是苹果为了支持网络应用(或者说网页)添加到桌面需要的图标,有了这些TouchIcon的网页链接更加和Native应用更相像了。由于苹果设备IPod,IPhone,IPad等设备广泛,很多网页都提供了touchicon这种图标资源。由于Android中并没有及早的有一份这样的标准,当我们想把网页添加到桌面时,仍然需要使用苹果的TouchIcon。
TouchIcon
当我们想让一个网页比较完美地添加到桌面,通常情况下我们需要设置一个png图片文件作为apple-touch-icon。比如:
<linkrel="apple-touch-icon"href="/custom_icon.png">
如果想支持IPhone和IPad,我们需要使用sizes属性来制定多个图片,默认sizes的值为60x60。
<linkrel="apple-touch-icon"href="touch-icon-iphone.png"> <linkrel="apple-touch-icon"sizes="76x76"href="touch-icon-ipad.png"> <linkrel="apple-touch-icon"sizes="120x120"href="touch-icon-iphone-retina.png"> <linkrel="apple-touch-icon"sizes="152x152"href="touch-icon-ipad-retina.png">
在IOS7之前,苹果系统会对添加到桌面的图标进行圆角化等视觉上的处理,为了不让其处理,我们可以使用apple-touch-icon-precomposed来作为rel的值实现。
更多关于TouchIcon的信息,可以访问水果开发者网站了解更多。
Android中有缺陷的实现
在AndroidWebView提供了处理TouchIcon的回调,onReceivedTouchIconUrl(WebViewview,Stringurl,booleanprecomposed)该方法返回了对我们有用的touchicon的url,和是否为预组合(在IOS中不需要进行视觉处理)。虽然有这些数据,我们可以进行处理,但是这其中是有问题的,就是我们不好确定文件的大小,来选择适合的图片。
举个例子,如下一个网页的源码,其中sizes的顺序不规律
<linkrel="apple-touch-icon-precomposed"sizes="72x72"href="http://www.qiyipic.com/20130423143600/fix/H5-72x72.png"> <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="http://www.qiyipic.com/20130423143600/fix/H5-114x114.png"> <linkrel="apple-touch-icon-precomposed"sizes="57x57"href="http://www.qiyipic.com/20130423143600/fix/H5-57x57.png"> <linkrel="apple-touch-icon-precomposed" href="http://www.qiyipic.com/20130423143600/fix/H5-0x0.png">