手機網頁, 網頁設計

手機網頁必知-設定書籤網址建立到手機桌面中的APP圖示

2013/07/08
梅問題-手機網頁-設定書籤網址建立到桌面中的APP圖示
  使用水果或Android的朋友應該都知道,除了可將常去的網站加到書籤中外,還可將書籤建立到桌面中,變成一個APP圖示,之後只要點一下該圖示,就會直接進入該網站裡,相當的方便,就像平常在用一般的應用程式一樣,但若該網站沒有特別設定書籤圖示時,把網址加到桌面的APP圖示時,就會出現網站的縮圖,相當的醜且沒特色,而怎該如何立自已專屬的面的APP顯示圖示呢?其實相當的簡單,只要加入一小段語法就可以囉!就像加入我的最愛圖示一樣,至於怎麼加,現在就一塊來看看吧!

將下方的語法加到<head>~</head>之間。
<link rel="apple-touch-icon" href="images/Icon.png"> <!-- 57×57px -->
<link rel="apple-touch-icon" sizes="72×72" href="images/Icon-72.png"> <!-- 72×72px ipad-->
<link rel="apple-touch-icon" sizes="114×114" href="images/Icon@2.png"> <!-- 114×114px iphone4-->

需準備 57×57px、72×72px、114×114px,至於檔名的部分,可自行設定,這邊梅干是直接延用iOS APP的命名規則。
梅問題-手機網頁-設定書籤網址建立到桌面中的APP圖示
完成之後,把網址加到桌面時,就會產生剛所設定的圖示啦!是不是好看很多,就像一般的APP一樣。
梅問題-手機網頁-設定書籤網址建立到桌面中的APP圖示