將網站添加到iPhone的主畫面上，添加iphone主畫面

將網站添加到iPhone的主畫面上，添加iphone主畫面

　　我之前有篇文章介紹過如何將網站固定到Windows的開始菜單，並可以自訂表徵圖、顏色以及Windows推播通知，其實Apple也有類似的功能，通過在網頁的head部分添加link標記，在Safari瀏覽器中我們可以輕易地將網站添加到iPhone的主畫面，使它看起來就像一個普通的app一樣。

　　要實現該功能很簡單，只需要在你網站的根目錄下放一張名為"apple-touch-icon.png"的圖片即可，像添加favicon一樣（將名為"favicon.ico"的表徵圖放在網站的根目錄下，瀏覽器會自動載入並顯示網站的表徵圖）。

　　如果需要精確控制，添加下面的代碼：

　　1. 在網頁的head部分添加以下代碼，其中href屬性值為圖片的路徑。

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

　　2. 為滿足不同解析度裝置的顯示效果，可以添加三個不同解析度的圖片：57 x 57像素用於前三代iPhone和iPod Touch，72 x 72像素用於iPad，114 x 114像素用於採用Retina display的iPhone4和iPod Touch等後續產品。通過sizes屬性控制：

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

　　3. 另外，通過將rel屬性的值修改成"apple-touch-icon-precomposed"來避免iOS將表徵圖添加高光效果。