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

梅問題-手機網頁-設定書籤網址建立到桌面中的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圖示

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

《Pure》羽量級自適應網頁版型框架 (RWD  Framework)

《Pure》羽量級自適應網頁版型框架 (RWD Framework)

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 13 梅留言

  • 第1梅
    red whale 說道:

    站長,您好:
    我是用手機版的Google Chrome來建立網站捷徑至手機的桌面:按右上方的「三點鈕」,點選「新增至主螢幕」來新增捷徑至桌面,但是沒有顯示任何icon(只顯示一個字母「R」)。 前幾天我有把詳細問題內容填寫在您網站的聯絡表單給您,不曉得您有沒有看到? 若有,請回覆我,謝謝。
    http://i.imgur.com/UXNBMB3.jpg
    http://i.imgur.com/vabuidO.jpg

    回應:
    你好,前幾天梅干有測試,可正常的顯示,
    這個無論iphone與android皆會顯示,只是android顯示的形式有所差異,
    剛用Android手機,加入會出現一顆小棒球的圖示
1 3 4 5