iphone上的 safari 瀏覽器一直有著很不錯的使用者經驗的手機瀏覽器.
而且可以很方便的把常用的網站 bookmark 到桌面上, 但是那個 icon 若是沒有經過設定的話, 將會是一個小的預覽縮圖放在桌面上(應該說主畫面上).
那如何設定這個 icon 呢? 可以參考這篇資料: http://vjarmy.com/archives/2008/01/howto_iphone_webclip_icons.php , 其實就是建立一個 57*57 的 PNG 圖, 並且檔名命名為 apple-touch-icon.png 放在 web 目錄的根目錄下即可. 這個 57*57 的 PNG 圖就會是”加入主畫面螢幕”上的那個 icon 了.
若不方便放這個檔案到 web server 的網站根目錄, 也可以使用 meta tag 來指定, 如下:
<head>
...
<link rel="apple-touch-icon" href="/images/my.png"/>
...
</head>
這樣的效果也是一樣的. 在 apple.com 開發者網站上也有詳細的說明:
- http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
- http://developer.apple.com/safari/library/codinghowtos/Mobile/UserExperience/index.html
- http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html
[補充說明 2010/1/6 11:15]
在上面的關於 apple-touch-icon.png 這個檔名, 若是命名為 apple-touch-icon-precomposed.png 的話, 則加入主畫面螢幕時, 不會再對該圖做任何特效處理, 已知的特效應該是一個 3d 效果的圓弧及加上 4個角的圓角. 可以參考這篇上面有圖做比較: http://uxhero.com/how-to/how-to-keep-mobile-safari-from-adding-gloss-to-home-screen-bookmark-icons/