為 iPhone 和 iPad 自定義網站的主螢幕圖示

 iPhone 和 iPad 等蘋果裝置使用主螢幕 (Home Screen, 也稱桌面) 管理應用程式, 還可以通過浏覽器的添加到主螢幕功能将網站連結作為快捷方式添加為主螢幕圖示.

iPhone/iPad 上的原生浏覽器可以向主螢幕添加小圖示, 作為網站入口. 如下:

如果網站沒做過相容處理, 小圖示顯示的是網頁截圖. 效果如下:

我們再看看 Apple 自己的頁面, 它已經設定了主螢幕圖示, 效果如下:

看到上面的截圖, 我想你會打算自定義一個圖示了. iOS 的網頁圖示與傳統的網頁 favicon 相似, 處理方式也差不多, 下面會為你介紹幾種處理方式.

放置在預設位置

建立一個 PNG 圖檔, 命名為 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在網站根目錄即可.

指定圖示路徑

為頁面指定一個圖示路徑, 在網頁的 head 部分代碼如下:

為不同裝置指定圖示

在網頁中為不同的裝置指定特殊圖示, 因為 iPhone 和 iPad 的圖示尺寸不一樣, 需要 sizes 屬性來進行區分, 如果沒有定義 sizes 屬性, 預設 sizes 是 57 x 57. 代碼如下:

如果沒有圖檔尺寸可以比對裝置圖示的尺寸, 存在比裝置圖示大的圖檔, 将使用比裝置圖示尺寸略大的圖檔; 如果沒有比裝置圖示大的圖檔, 則使用最大的圖檔.

如果沒有在網頁中指定圖示路徑, 将會在根目錄搜尋以 apple-touch-icon... 和 apple-touch-icon-precomposed... 作為字首的 PNG 圖檔. 假設現在有一個裝置的圖示大小是 57 x 57, 系統将按以下順序搜尋圖示:

apple-touch-icon-57x57-precomposed.png

apple-touch-icon-57x57.png

apple-touch-icon-precomposed.png

apple-touch-icon.png

iPhone 和 iPod (iTouch) 使用的圖示尺寸:

57 x 57 pixels

114 x 114 pixels (高分辨率, iPhone 4 或以上使用)

iPad 使用的圖示尺寸:

72 x 72 pixels

當我們将圖檔作為主螢幕圖示, iOS 系統會自動為圖示加上視覺效果:

圓角

陰影

高亮

例如, 一個 57 x 57 的網站圖示如下:

當使用者将網頁添加到主螢幕, 圖示會加上上述效果, 如下:

是以我們無需對圖檔做太多處理, 提供符合尺寸的正方形圖檔即可.

無論是将圖示放在預設位置上, 還是指定圖示路徑, 如果圖示帶有 -precomposed 字尾 (如: apple-touch-icon-precomposed.png), 系統将不會為你加上高亮效果.

我也為這個部落格添加主螢幕圖示, 同學們可以在裝置中打開試試效果.

原文位址：http://www.neoease.com/add-web-icon-to-home-screen-on-iphone-or-ipad/

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>