66      阿裏雲  技術社區[雲棲]

為 iPhone 和 iPad 自定義網站的主屏幕圖標

iPhone 和 iPad 等蘋果設備使用主屏幕 (Home Screen, 也稱桌麵) 管理應用程序, 還可以通過瀏覽器的添加到主屏幕功能將網站鏈接作為快捷方式添加為主屏幕圖標.

是否你也想過為網站定義一個圖標, 如果用戶將網站添加至主屏幕, 網站鏈接看起來更像原生程序, 也能獲得更多的關注. 除了兼容手機端的瀏覽體驗, 我們還能做得更多, 為 iPhone 和 iPad 自定義網站的主屏幕圖標也算其中之一, 本文將對網站的主屏幕圖標及其設定方法為進行詳細介紹.

網站的主屏幕圖標

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

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

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

設定主屏幕圖標

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

放置在默認位置

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

指定圖標路徑

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

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

為不同設備指定圖標

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

<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" />

如果沒有圖片尺寸可以匹配設備圖標的尺寸, 存在比設備圖標大的圖片, 將使用比設備圖標尺寸略大的圖片; 如果沒有比設備圖標大的圖片, 則使用最大的圖片.

如果沒有在網頁中指定圖標路徑, 將會在根目錄搜尋以 apple-touch-icon... 和 apple-touch-icon-precomposed... 作為前綴的 PNG 圖片. 假設現在有一個設備的圖標大小是 57 x 57, 係統將按以下順序搜尋圖標:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. 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), 係統將不會為你加上高亮效果.

後話

本文參考了 Safari 開發文檔的兩篇文章:

《Configuring Web Applications》和《Custom Icon and Image Creation Guidelines》. 主要摘要了關於主屏幕圖標的一些內容, 如果發現錯漏和疑問, 請留言反饋.我也為這個博客、添加主屏幕圖標, 同學們可以在設備中打開試試效果.
轉帖：https://www.neoease.com/add-web-icon-to-home-screen-on-iphone-or-ipad

點評：
最後更新：2017-04-03 16:48:30

  上一篇： gitignore.io ------ 一個根據語言，工具或者平台來智能自動生成gitignore文件的在線工具

  下一篇： 第二章 IoC Annotation注入