Loading...

在手機上如何建立網址到手機桌面中並且使用圖示

Temperature: 0 °C

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

這回索性也幫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

https://innstory.com/story-在手機上如何建立網址到手機桌面中並且使用圖示-1514

Prev
 兒子幹的好啊

Next
javascript_底下使用_htmlspecialchars 

Nearby Attractions

台北市內湖區江南街71巷75弄-Nearby Attractions

  • 草山水道系統 Go
  • 婦聯總會 Go
  • 前南菜園日式宿舍 Go
  • 北投文物館 Go
  • 老松國小 Go
  • 臺北機廠 Go

About the Author

Chung

我是chung
網路工作者
主業是網站系統開發建置
副業是做夢,寫故事
作品請參考/teme.biz
做夢請參考/innstory.com
聯絡/chung.teme@gmail.com

#有人用筆寫日記,有人用歲月寫日記,有人用照片寫日記,而我,用innstory寫日記。

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

Responsive Web Design使用CSS3的Media Queries進行自適應網頁設計

智慧型手持裝置(手機、平板)已是非常普及的日常生活必需品。 所以現在,在開發系統時客戶...

關於資安防護

關於資安防護

一直以來我都不敢寫跟資安有關的文章..對我來說...資安一直是一個課題..XSS......

HTML5 Geolocation

HTML5 Geolocation

說真的,HTML Geolocation的功能真的好用... 輕鬆就可以讓網站也能取得...

Recommended reading

Other stories happened at this address

紅燒豆腐佐海尼根

紅燒豆腐佐海尼根

e 其實我並不愛把豆腐弄熱來吃~ 小時後的記憶~豆腐就是該從冰箱拿出來淋上點醬油......

5G,40週了。

5G,40週了。

其實已經超過週了,G卻似乎還不想退房~ 是住在媽媽肚子裡太舒服了? 目前醫生給的期限是...

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPEMYISAM錯誤

新舊交替,使用phpmyadm出現1064 error in CREATE TABLE … TYPE=MYISAM錯誤

sql 系統移機的過程中,最重要的環節....我想...莫過於是系統的環境了....。...

獨自一個人的2個星期,第2晚,手機上傳來兒子的新把戲。

獨自一個人的2個星期,第2晚,手機上傳來兒子的新把戲。

一早醒來,發現床原來是這麼的大,而且我還睡在Mandy的位子上。 想想以往我都是睡在床...

第133天,目前已晉升為翻身達人。

第133天,目前已晉升為翻身達人。

第天,目前已晉升為翻身達人。...

拼圖時間

拼圖時間

父子時間。 發現原來玩拼圖也可以教母語,我一邊拚著一邊用客家話要U去找同顏色的拼圖。 ...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format