iOS / Android 移动设备中的 Touch Icons

iOS / Android 移动设备中的 Touch Icons

上次转载了一篇《将你的网站打造成一个iOS Web App》,但偶然发现这篇文章的内容有些是错误的——准确来说也不是错误,只是不适合自半年前来的情况了(也可以说是iOS7 之后的时间)——话说现在的的移动设备真是日新月异。好了,结合Jeff 查阅的资料,下面来详细来说说iOS / Android 移动设备中的 touch icons。

关于 “Touch icons”

favicons 知道是什么吧?浏览器的tab 前面的那个小图标,放入某个网站到收藏夹的时候也会看到,这个可以说是pc 互联网的产物了。而Touch icons 则是移动互联网的产物,用于手机、平板等移动设备上。为你的网站添加个Touch icons 可以用类似下面的代码:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

这个只是基础的演示代码,一般我们不这么用。在深入讲解之前先再给出另外一行代码:

<link rel="icon" sizes="196x196" href="apple-touch-icon.png">

上面这个是则有点不同,rel="icon",可喜的是,Chrome v31+ for Android 以上的版本支持这个;但遗憾的是,苹果的设备不支持这个。

考虑到最大的兼容性,Chrome for Android 做了一定的牺牲,那就是,如果再你的网页上找不到上面的代码,就会向下兼容,跟随者苹果的设备支持的touch icons(类似一开头的代码)。

Fancy effects

也许你看到过这么两种代码:

<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

那么,多出来的precomposed 表示神马意思呢?没有precomposed 代码,一些包括圆角,阴影,反光的特效便会自动添加到生成的本地app 的logo 中。是自iOS 2.0 开始的,但如今随着iOS7 的出现,已经变得可有可无了。

不同的Touch icons 尺寸

(接下来讲的基本上是apple 的设备)考虑到不同设备的分辨率以及屏幕材质的问题,为了最佳的显示体验,你可以用sizes标签定义下,如:

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

apple 开发者官网中,为不同的apple 设备推荐了相应的size,比如:

iPad with Retina:144 × 144 pixels 152 × 152 pixels
iPhone with Retina:114 × 114 pixels 120 × 120 pixels

为什么有个删除线的?114、144的像素比是之前的,随着iOS7 出来后,官方推荐size 变成120、152的。单独考虑apple 的设备,iphone 有无Retina 的,ipad有无Retina 的,ipadmini有无Retina 的皆要一一考虑,还有不同的iOS 版本…… 一句话,挺烦了,国外有人给出了下面的比较涵盖、兼容的代码(直接看注释吧):

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">

有些人还考虑到iOS 4.2 之前的版本不支持size 标签,所以sizes 标签应该去掉,对此,我认为没必要。

后记

上面的内容大部分是翻译http://mathiasbynens.be/notes/touch-icons 这篇e 文的,翻译的过程中加入了自己的理解。当然,以我英文的水平,不敢担保有没有曲解原文或者有大错误,如有,望指正。

话说就为了这么个东西就要写那么多代码,连图片也要ps 好几个,真心累人。我说,代码是死的,而且不是每个人都用apple 的设备的,确实是没有必要过于考虑完全——不然累的是自己。其实原文还有一些内容的,但这篇文章就这样结束了。

评分:
当前平均分 4.00 (81%) - 5 个投票
云左主机 广告
6 条 评论
  1. 已经用上~~

    3年前 回复
  2. 请问安卓手机怎么定义?

    3年前 回复
  3. 我发现这里都是干货啊

    3年前 回复
  4. 本来只打算做57、72和114三个大小的,结果查到这篇文章…… :eek:

    4年前 回复
  5. :mrgreen: 用上了。

    4年前 回复
发表评论