meta 標籤分兩大部分

1. HTTP 標題資訊（http-equiv）
2. 頁面描述資訊（name）

http-equiv 屬性

Content-Type 值（顯示字符集的設定）

說明：設定頁面使用的字符集，用以說明主頁製作所使用的文字語言，瀏覽器會根據此來呼叫相應的字符集顯示 page 內容。

用法：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

name 屬性

1.viewport 值（移動螢幕的縮放）

什麼是viewport呢？

viewport即可視區域，對於桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態列、滾動條等等之後用於看網頁的區域，

width: viewport 的寬度 （範圍從 200 到 10,000 ，預設為 980 畫素 ）
height: viewport 的高度 （範圍從 223 到 10,000 ）
initial-scale: 初始的縮放比例 （範圍從>0到 10 ）
minimum-scale: 允許使用者縮放到的最小比例
maximum-scale: 允許使用者縮放到的最大比例
user-scalable: 使用者是否可以手動縮放(no，yes)

用法：<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

說明：

• 強制讓文件與裝置的寬度保持 1:1 ；
• 文件最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；
• user-scalable 定義使用者是否可以手動縮放（ no 為不縮放），使頁面固定裝置上面的大小；

注意：實際測試中發現，有些安卓系統自帶的瀏覽器並不支援這一條規則，能夠對頁面進行放大，一旦放大相應的 box 也隨之放大，導致頁面出現錯亂問題。

解決方法：定義頁面的最小寬度

body{

min-width:320px;

}

對於這些屬性，我們可以設定其中的一個或者多個，並不需要你同時都設定，iPhone 會根據你設定的屬性自動推算其他屬性值 ，而非直接採用預設值。

如果你把initial-scale=1 ，那麼 width 和 height在豎屏時自動為320*356 （不是320*480 因為位址列等都佔據空間 ），橫屏時自動為 480*208。類似地 ，如果你僅僅設定了 width ，就會自動推算出initial-scale 以及height。例如你設定了 width=320 ，豎屏時 initial-scale 就是 1 ，橫屏時則變成 1.5 了。 那麼到底這些設定如何讓 Safari 知道 ？其實很簡單 ，就一個 meta ，形如 ：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

2.format-detection 值（忽略頁面中的數字識別為電話號碼）

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

說明：

• 使裝置瀏覽網頁時對數字不啟用電話功能（不同裝置解釋不同，iTouch 點選數字為存入聯絡人，iPhone 為撥打電話），忽略將頁面中的數字識別為電話號碼。
• 若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的連結會在ios裝置上開啟相應的程式元件。

3、apple-mobile-web-app-capable 值（網站開啟對 web app 程式的支援）

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

這meta的作用就是刪除預設的蘋果工具欄和選單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。

iphone裝置中的safari私有meta標籤，它表示：允許全屏模式瀏覽；

4、apple-mobile-web-app-status-bar-style 值（改變頂部狀態條的顏色）

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
 作用是控制狀態列顯示樣式

說明：

• iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；
• 預設值為 default（白色），可以定為 black（黑色）和 black-translucent（灰色半透明）；

5.author值（設定作者姓名及聯絡方式）

<metaname="author"contect="name,email" />

蘋果 Web App 其他設定

<linkrel="apple-touch-icon-precomposed"href="iphone_logo.png" />

說明：這個 link 就是設定 Web App 的放置主螢幕上 icon 檔案路徑（圖片四）。 
使用： 
- 該路徑需要注意的就是放到將網站的文件根目錄下但不是伺服器的文件的根目錄。 
- 圖片尺寸可以設定為 57*57（px）或者 Retina 可以定為 114*114（px），iPad 尺寸為 72*72（px）

2.APP啟動動畫

<linkrel="apple-touch-startup-image"href="logo_startup.png" />

使用：

• 放置的路徑和上面一樣。
• 官方規定啟動介面的尺寸必須為 320*640（px），原本以為 Retina 螢幕可以支援雙倍，但是不支援，圖片顯示不出來。