iOS / Android 移动设备中的 Touch Icons

2014/02/22 前端代码, 前端开发原创 6 15,432

上次转载了一篇《将你的网站打造成一个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 的设备的，确实是没有必要过于考虑完全——不然累的是自己。其实原文还有一些内容的，但这篇文章就这样结束了。