apple-touch-icon

時間 2019-11-18

標籤 apple touch icon 欄目 MacBook 简体版

原文原文鏈接

在iPhone,iPad,iTouch的safari上能夠使用添加到主屏按鈕將網站添加到主屏幕上。apple-touch-icon是IOS設備的私有標籤，若是設置了相應apple-touch-icon標籤，則添加到主屏上的圖標會使用指定的圖片。在<head></head>區域加入下面代碼便可。html

<link rel="apple-touch-icon" href="/custom_icon.png"/>

apple-touch-icon 標籤支持sizes屬性，能夠用來放置對應不一樣的設備。app

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

分別放置57x57（默認值）的圖標對應320x640的老設備，72x72對應ipad，114x114對應retina屏的iPhone及iTouch。因爲手頭沒有iPad3，因此沒測試是否支持144x144的圖標在iPad3上的顯示。iphone

雖然官方都用的png圖片作說明，但實際測試jpg格式也可用（不推薦），圖片無需作圓角處理，同Native App同樣，系統會自動爲圖標添加圓角及高光。若是不想系統對圖標添加效果，能夠用apple-touch-icon-precomposed代替apple-touch-icon。ide

圖標搜索的優先級以下：post

若是沒有跟相應設備推薦尺寸一致的圖標，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的圖標。
若是沒有比推薦尺寸大的圖標，會優先選擇最接近推薦尺寸的圖標。
如些有多個圖標符合推薦尺寸，會優先選擇包含關鍵字precomposed的圖標。

若是未在區域指定用link標籤指定圖標，會自動搜索網站根目錄下有apple-touch-icon...或者 apple-touch-icon-precomposed…前綴的圖標。如設備推薦尺寸爲57x57,優先級以下：測試

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

偷懶的方法，能夠直接設置一個最大尺寸的圖標，如我測試使用一個114x114大小的圖標，在iPhone4以及iPad2上均可以正常顯示。以上內容在iPhone4以及iPad2上測試經過。網站

參考網址:
Safari Web Content Guide -- Configuring Web Applicationsui

轉 http://motype.org/post/design/apple-touch-iconspa

相關標籤/搜索

MacBook

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。