Mobile Web #3 如何設定桌面捷徑&啟動 Loading 圖示

IMG_0127

繼上一篇Mobile Web #2 如何在 Mobile 上面呈現 App 般的效果手機在瀏覽網頁的時候,都可以將喜歡的網頁加入桌面捷徑,就是會有一個很像你的 APP 的路徑在桌面上,當你執行的時候就會啟動瀏覽器去開啟這個網頁。

<link rel="apple-touch-icon" href="Content/Images/desktop-icon.png" />

在利用桌面連結啟動之後,連結到頁面。在 iOS 上有區分為使用 Safari 開啟,或是重新啟動一個新的執行續,一樣是使用 Safari 核心,可是包括多執行的下方小清單,都會改成 icon 的圖示。在一開始的版本限制大小為 57×57 , iPad 為 72×72 在 iOS4 之後的高畫質螢幕都支援到 114×114,如果放的是高畫質但是較舊的裝置上瀏覽也會自動降低解析度。

如果要想要在桌面連結執行的時候是一個獨立執行的網頁,而並非用 Safari 開啟的話

<meta name="apple-mobile-web-app-capable" content="yes" />

在獨立執行的時候開啟會比直接加載在 Safari 多一段載入的時間,這時候也可以設定載入時候的 loading 畫面圖片,除了沒有在 AppStore 上架之外,這真的就很像一個 Natïve App 了(還缺少了 push message 的功能)

<link rel="apple-touch-startup-image" href="Content/Images/startup-icon.png">


Reference

這篇有很完整的介紹

http://answers.oreilly.com/topic/2123-how-to-create-a-website-icon-for-the-iphone-and-other-mobile-devices/

How to Create a Website Icon for the iPhone and other Mobile