Loading...

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

Temperature: 0 °C

ChungChung
author_tools

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

這回索性也幫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
Innstory 資訊科技新知

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

Photoshop 曲線文字建置

Photoshop 曲線文字...

Photoshop一直都是很強悍的繪圖軟體。 裡頭的【鋼筆工具】,可以拉貝茲曲線的.... 我剛開始...

黑客松Hackathon

黑客松Hackathon

這個星期六日要同朋友去參加一個聚會...黑客松Hackathon... 老實說我根本不知道那是什麼....

.sql檔過大無法匯入phpMyAdmin

.sql檔過大無法匯入php...

修改phpMyAdmin資料夾中的config.inc.php檔。 打開後找到下列兩行或自行加入: ...

Recommended reading

Other stories happened at this address

目前奶量最高紀錄是160cc

目前奶量最高紀錄是160cc...

m 小悠第天,目前奶量最高紀錄是cc,但也只有出現一次而已。 大部份白天的時間還算好帶。 但到了每天...

今天又多喝了一杯咖啡!

今天又多喝了一杯咖啡!

我愛咖啡....愛他的香氣還有喝咖啡時的那種悠閒..... 上午順利的在客戶那邊做完教育訓練.......

所以......兒子,你是對早餐不滿意?還是?

所以......兒子,你是對...

所以......兒子,你是對早餐不滿意?還是?

爬行訓練從Pumping開始( ̄∇ ̄)

爬行訓練從Pumping開始...

爬行訓練從Pumping開始( ̄∇ ̄)

雨天,窩在家裡逗女兒

雨天,窩在家裡逗女兒

雨天,窩在家裡逗女兒

windows下合併多個ISO檔為一個!

windows下合併多個IS...

所謂ISO檔就是副檔名為【.iso】的檔案一般稱為【光碟映像檔】。 我們可以透過某些燒錄軟體將整張裝...

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