自訂 iPhone 以及 iPod Touch webclip 網站桌面圖示

webclip 在 iPod Touch 上的樣子

話說 iPhone 正式在台灣開賣了,iPhone 和一般智慧型手機相較之下,除了也可以安裝許多程式外,還有一個智慧型手機比較少見的功能,就是 web apps 和 webclip。其實兩者指的都是網頁,差別在於一個是功能取向,一個則是內容取向。在 iPhone 裡對網頁有一種特別的處理方式,當使用者點選瀏覽器下方的”+”時,可以用”加入主畫面螢幕” 將網站存成桌面上的一個捷徑方便存取。

但是如果網頁沒有做任何設定的話,在桌上的捷徑圖示是一個網頁內容縮圖,而不是 iPhone style 的圖示,根據 Apple 的 web app 開發指南,我們有以下幾種作法。

最簡單方式就是作一張 75 x 75 px 的圖,檔案存成 apple-touch-icon.png 或 apple-touch-icon.jpg, 然後將圖檔放置於網站根目錄下。請注意,如果你的網站根目錄和伺服器根目錄是不同地方的話,請不要存錯地方。

如果你現在用的網站空間不允許你上傳檔案,但你可以自己修改網頁內容的話,可以先把圖檔存到一個允許外連的空間,然後在你網站的預設網頁的 <head></head> 區塊裡加入:

<link rel=”apple-touch-icon” href=”圖形檔的完整位置”/>

另外,如果你的網站是用 WordPress 架設的話,可以裝一下 WPtouch iPhone Theme 這個外掛套件,除了可以自訂 webclip icon 外,連網站內容都可以自動調整成 iPhone 適合閱讀的尺寸,還會自動幫你縮圖喔。

This entry was posted in 奇技淫巧, 玩物喪志, 設計工藝 and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>