JuilinChungJuilinChung
上回做專案時,客戶說了手機桌面上的網站捷徑太醜,想要美化。

這回索性也幫Innstory美化一下,順便寫下美化的方式。


首先,們都知道,當使用手機開啟網站時,右上角會出現直立的(...)按鈕,如上方左邊圖示。

點擊後則會出現一個隱藏選單,其中有一個選項叫做(加到主畫面),如上面右邊圖示。

這時只要點選後,便可將網站連結建立捷徑於手機桌面上。

只是,尚未指定圖示的情況,手機桌面上都會出現手機自訂的icon,例如Innstory的圖示就會出現藍色底一個字母I的字樣。

但要怎麼做,才能建立像手機上的APP一樣特色又專業的圖示?

首先,並須先準備好三張圖,分別是57×57px、72×72px、114×114px。

檔名的部分可以自行命名或依據APP切圖的檔案命名格式,就是「圖片類型_分類_用途_狀態.png」這種方式命名。

如下圖~


接著,請服用以下語法,並包在head之間。
<link rel="apple-touch-icon" href="images/icon-innstory-web.png">
<link rel="apple-touch-icon" sizes="72×72" href="images/icon-innstory-web-72.png">
<link rel="apple-touch-icon" sizes="114×114" href="images/icon-innstory-web-@2.png">


完成之後,再把網址加到桌面時,就會變成剛所設定的圖示,如下圖。


左方圖是服用前,右方圖為服用後。

另外,有時瀏覽器的暫存檔清不掉時會無法顯示剛剛設計好的圖示。

這時可以使用無痕視窗瀏覽。

又或者將引入的圖示後方加上參數。

例如~

images/icon-innstory-web.png?2018037


以上紀錄。

台北市內湖區江南街71巷75弄 Go

作者簡介

JuilinChung

我是chung

網路工作者

主業是網站系統開發建置

副業是做夢,寫故事

作品請參考 / teme.biz

做夢請參考 / innstory.com

聯絡 / chung.teme@gmail.com

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

JavaScript的獲取日期代碼不足兩位數補0

JavaScript的獲取日期代碼不足兩位數補0

當我們用javascript得到了一個時間後...針對月份及日期的部分只會顯示數字.....

Mysql查詢特定欄位相乘總合

Mysql查詢特定欄位相乘總合

最近常常會用到的查詢方式... 問題是這樣的,我有一個資料表內容結構如下: +++++...

DIV區塊內文字左右對齊?

DIV區塊內文字左右對齊?

最近常接到一些英文網站建置的專案....為了讓內容文字能夠左右對齊... 所以我用了以...

請選擇選項

執行錯誤

Hi,謝謝你的參與,但無法重複投票哦~