上次轉載了一篇《將你的網站打造成一個iOS Web App》，但偶然發現這篇文章的內容有些是錯誤的——準確來說也不是錯誤，只是不適合自半年前來的情況了（也可以說是iOS7 之后的時間）——話說現在的的移動設備真是日新月異。好了，結合Jeff 查閱的資料，下面來詳細來說說iOS / Android 移動設備中的 touch icons。
關于 “Touch icons”
favicons 知道是什么吧？瀏覽器的tab 前面的那個小圖標，放入某個網站到收藏夾的時候也會看到，這個可以說是pc 互聯網的產物了。而Touch icons 則是移動互聯網的產物，用于手機、平板等移動設備上。為你的網站添加個Touch icons 可以用類似下面的代碼：
1 |
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
這個只是基礎的演示代碼，一般我們不這么用。在深入講解之前先再給出另外一行代碼：
1 |
<link rel="icon" sizes="196x196" href="apple-touch-icon.png">
|
上面這個是則有點不同，rel="icon"，可喜的是，Chrome v31+ for Android 以上的版本支持這個；但遺憾的是，蘋果的設備不支持這個。
考慮到最大的兼容性，Chrome for Android 做了一定的犧牲，那就是，如果再你的網頁上找不到上面的代碼，就會向下兼容，跟隨者蘋果的設備支持的touch icons（類似一開頭的代碼）。
Fancy effects
也許你看到過這么兩種代碼：
1 2 |
<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標簽定義下，如：
1 |
<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 版本…… 一句話，挺煩了，國外有人給出了下面的比較涵蓋、兼容的代碼（直接看注釋吧）：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 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 的設備的，確實是沒有必要過于考慮完全——不然累的是自己。其實原文還有一些內容的，但這篇文章就這樣結束了。
 |
不含病毒。www.avast.com |
留言列表
