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

PHP網路爬蟲之抓取Open Graph(OG) Meta tags

PHP網路爬蟲之抓取Open...

用google爬了很多文章.... 最後終於找到一篇內容..... 只是測試了半天...感覺奇怪為何...

PHP 利用phpmailer 寄信...

PHP 利用phpmaile...

一般來說其實PHP本身已經提供了Mail()函數可以使用,但由於一些令人不愉快的原因...我租用的V...

Mysql最怕就是手賤

Mysql最怕就是手賤

今天我手賤了眼盲了@@... 錯把delete當成UPDATE....啃!!今天下午超不順的... ...

Recommended reading

Other stories happened at this address

蘋果泥大失敗,這傢伙竟然排斥到給我嘔出來~

蘋果泥大失敗,這傢伙竟然排斥...

蘋果泥大失敗,這傢伙竟然排斥到給我嘔出來~

意外的驚喜~

意外的驚喜~

自從照顧U到現在,真的是嚐遍了各種情緒。 動過怒、擔過心、開心過也甜蜜過~ 老實說,照顧小孩著實困難...

39週,已經突破3300公克了......

39週,已經突破3300公克...

Dear 小小鍾~ 週了,今天醫生阿伯說你已經突破公克了......應該要出來了~ 我幫你看了一下,...

5個多月,學會了向後爬行。

5個多月,學會了向後爬行。

個多月,學會了向後爬行。

關掉phpinfo()

關掉phpinfo()

pexelsphotod 配置php環境的時候往往都會寫 phpinfo(); 這個函數來測試php...

清炒青花菜佐尼伯特颱風

清炒青花菜佐尼伯特颱風

青花菜,十字花科,富含豐富維生素C和膳食纖維,還含有具強效抗癌性能的多種營養成分如二吲哚甲烷、維他命...

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