apple-touch-icon-precomposed 和 apple-touch-icon屬性區別

標籤：style   http   get   使用   width   os   

蘋果safari瀏覽器當中apple-touch-icon-precomposed 和 apple-touch-icon屬性是有區別的，之前在網上查了下相關的資料和蘋果的開發文檔手冊，對這兩中屬性區別說的不夠詳細，導致現在大家開發的時候有些混淆。

蘋果safari瀏覽器定義的這兩種屬性是為了蘋果行動裝置（ipod、ipad、iphone）對移動網站-mobile web進行收藏（“添加到案頭表徵圖”）的時候增加的表徵圖定義屬性，當你建立一個移動網站（俗稱：手機站，mobile web），避免不了為移動站的表徵圖進行設定（這裡有篇關於蘋果meta設定詳解的文章>>點擊查看<<），在這篇文章當中尚未介紹這兩中屬性的區別，這篇文章就是彌補這一空缺。

表徵圖設定的屬性分為：

apple-touch-icon 和 apple-touch-icon-precomposed兩種屬性，從字面意思上可以看出，第一個是 “蘋果行動裝置表徵圖”，第二個為“蘋果行動裝置初始表徵圖樣式”，由於第二個的意思完全搞不明白預設是預設的什麼究竟有什麼不同的地方，從官方資料當中也沒有搞懂有什麼明顯的不同，通過實驗得知了這兩個明顯的差異。

直接：

圖片一:

（圖片一）右下角可以看出有兩個Milanoo表徵圖，分別是apple-touch-icon 和 apple-touch-icon-precomposed屬性的表徵圖，看出區別了沒？

 

放大看大圖：注意表徵圖上面的光澤感，看明白了吧，使用apple-touch-icon屬性的明顯比使用apple-touch-icon-precomposed表徵圖多出一個高光，因為在ios系統中對icon有一套規範，就是在ios裝置的表徵圖統一為“四邊圓角”、“高光處理”，至於“表徵圖陰影”，是ios裝置中統一為所有案頭元素增加的，所以不作為表徵圖單獨處理的樣式，由於在視覺上統一最重要的是形狀的統一，所以“圓角”是必須的，但是對於“高光”蘋果沒有做出特別的強調，所以蘋果設定當中把“高光”作為可選項，就產生了apple-touch-icon 和 apple-touch-icon-precomposed屬性。

結論：

• 使用apple-touch-icon屬性為“增加高光光亮的表徵圖”；
• 使用apple-touch-icon-precomposed屬性為“設計原圖表徵圖”；

大家牢記了，說了通篇感覺最有用的就是最後兩句。哈哈。