關於Apple設備私有的apple-touch-icon屬性詳解

時間 2019-11-18

標籤關於 apple 設備私有 touch icon 屬性詳解欄目 MacBook 简体版

原文原文鏈接

之前咱們用過favicon在瀏覽器給網站進行身份標識，用法以下：html

<link href="http://image.feeliu.com/web/favicon.ico" rel="shortcut icon" />  
<link href="http://image.feeliu.com/web/favicon.ico" rel="Bookmark" />

現今移動設備愈來愈多，蘋果爲iOS設備配備了apple-touch-icon私有屬性，添加該屬性，在iPhone,iPad,iTouch的safari瀏覽器上可使用添加到主屏按鈕將網站添加到主屏幕上，方便用戶之後訪問。實現方法是在HTML文檔的<head>標籤加入下面代碼便可。web

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

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

57×57（默認值）的圖標對應320×640的iphone老設備，72×72對應ipad，114×114對應retina屏的iPhone及iTouch。ipad3對應144×144的高分辨率。app

這是官方開發社區的詳細介紹：less

Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.iphone

For iPhone and iPod touch both of these sizes are required:測試

57 x 57 pixels網站
114 x 114 pixels (high resolution)ui

For iPad, both of these sizes are required:this

72 x 72 pixels
144 x 144 (high resolution)

When iOS displays your app icon on the Home screen of a device, it automatically adds some visual effects to your icon so that it coordinates with the built-in icons on the Home screen. Specifically, iOS adds:

Rounded corners
Drop shadow
Reflective shine (unless you prevent the shine effect)

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later).

Ensure your icon is eligible for the visual enhancements iOS adds (if you want them). You should produce an image in PNG format that:

Has 90° corners

Does not have any shine or gloss

因此最完善的寫法應該是：

<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" />    
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png" />

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

圖標搜索的優先級以下：

若是沒有跟相應設備推薦尺寸一致的圖標，那個會優先使用比推薦尺寸大，但最接近推薦尺寸的圖標。

若是沒有比推薦尺寸大的圖標，會優先選擇最接近推薦尺寸的圖標。

如些有多個圖標符合推薦尺寸，會優先選擇包含關鍵字precomposed的圖標。

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

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

    apple-touch-icon-57×57.png

    apple-touch-icon-precomposed.png

    apple-touch-icon.png

在第三代 iPad 上有四種圖標規格： 57x57, 72x72, 114x114, 144x144.

因爲 retina 圖標的尺寸是標準圖標大小的2倍，所以實際上咱們只須要只作2款圖標便可：114 x 114 和 144 x 144 。將retina 圖標的大小設置成標準圖標的尺寸，那麼IOS就會根據狀況自動進行縮放了。

<!-- Standard iPhone -->  
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />  
<!-- Retina iPhone -->  
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />  
<!-- Standard iPad -->  
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />  
<!-- Retina iPad -->  
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

<meta name="apple-mobile-web-app-title" content="標題">

添加到主屏時的標題

<meta name="apple-mobile-web-app-capable" content="yes" />

是否啓用 WebAPP 全屏模式

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

狀態條顏色

<meta name="format-detection" content="telephone=no" />

屏蔽數字自動識別爲電話號碼

<meta name="msapplication-TileColor" content="#000"/>

Windows 8 磁貼顏色

<meta name="msapplication-TileImage" content="icon.png"/>

Windows 8 磁貼圖標

<meta name="description" content="" />

頁面描述

<meta name="keywords" content=""/>

頁面關鍵詞

相關標籤/搜索

每日一句

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