pCloud Partner Program

iphone safari的書籤icon如何設定?

手機大未來 2010/01/05 19:06
views: 156936 times
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 來指定, 如下:


這樣的效果也是一樣的. 在 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/

top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...