1.先說說mate標籤裏的viewport：
viewport即可視區域，對於桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態欄、滾動條等等之後用於看網頁的區域。對於傳統WEB頁面來說，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對於webapp而言，可能就有點問題了，在iphone上我們的webapp在豎屏下通常寬度都是320。
因此我們必須改變viewport，我們就有如下幾種屬性值可以設置：
width: viewport 的寬度 （範圍從 200 到 10,000 ，默認爲 980 像素 ）
height: viewport 的高度 （範圍從 223 到 10,000 ）
initial-scale: 初始的縮放比例 （範圍從>0到 10 ）
minimum-scale: 允許用戶縮放到的最小比例
maximum-scale: 允許用戶縮放到的最大比例
user-scalable: 用戶是否可以手動縮放
對於這些屬性，我們可以設置其中的一個或者多個，並不需要你同時都設置，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;” /> 設置了meat後我們頁面將如此呈現了
2.meta標籤裏的name屬性
name 屬性
(1)、＜meta name="Generator" contect=""＞用以說明生成工具（如Microsoft FrontPage 4.0）等；
(2)、＜meta name="keywords" contect=""＞向搜索引擎說明你的網頁的關鍵詞；
(3)、＜meta name="Description" contect=""＞告訴搜索引擎你的站點的主要內容；
(4)、＜meta name="Author" contect="你的姓名"＞告訴搜索引擎你的站點的製作的作者；
(5)、＜meta name="Robots" contect="all | none | index | noindex | follow | nofollow"＞
其中的屬性說明如下：
設定爲all：文件將被檢索，且頁面上的鏈接可以被查詢；
設定爲none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設定爲index：文件將被檢索；
設定爲follow：頁面上的鏈接可以被查詢；
設定爲noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設定爲nofollow：文件將不被檢索，頁面上的鏈接可以被查詢
3.webapp裏主要的mate用途
<meta name="apple-touch-fullscreen" content="yes"> 添加到主屏幕後，全屏顯示。
<meta name="apple-mobile-web-app-capable" content="yes" />
這meta的作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默認值爲default（白色），可以定爲black（黑色）和black-translucent（灰色半透明）。
注意： 若值爲“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁內容以應用程序風格顯示，並使狀態欄透明。
<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
說明： 這個link就是設置web app的放置主屏幕上icon文件路徑。
圖片尺寸可以設定爲57*57（px）或者Retina可以定爲114*114（px），ipad尺寸爲72*72（px）
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //將不識別郵箱
告訴設備忽略將頁面中的數字識別爲電話號碼
<link rel="apple-touch-icon" href="http://cdn.w3cfuns.com/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="http://cdn.w3cfuns.com/static/images/identity/HTML5_Badge_64.png" />
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時，在手機HOME界面創建應用程序樣式的圖標。
<meta name="sharecontent" data-msg-img="縮略圖地址" data-msg-title="標題" data-msg-content="簡介" data-msg-callBack="" data-line-img="縮略圖地址" data-line-title="標題" data-line-callBack=""/>
viewport即可視區域，對於桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態欄、滾動條等等之後用於看網頁的區域。對於傳統WEB頁面來說，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對於webapp而言，可能就有點問題了，在iphone上我們的webapp在豎屏下通常寬度都是320。
因此我們必須改變viewport，我們就有如下幾種屬性值可以設置：
width: viewport 的寬度 （範圍從 200 到 10,000 ，默認爲 980 像素 ）
height: viewport 的高度 （範圍從 223 到 10,000 ）
initial-scale: 初始的縮放比例 （範圍從>0到 10 ）
minimum-scale: 允許用戶縮放到的最小比例
maximum-scale: 允許用戶縮放到的最大比例
user-scalable: 用戶是否可以手動縮放
對於這些屬性，我們可以設置其中的一個或者多個，並不需要你同時都設置，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;” /> 設置了meat後我們頁面將如此呈現了
2.meta標籤裏的name屬性
name 屬性
(1)、＜meta name="Generator" contect=""＞用以說明生成工具（如Microsoft FrontPage 4.0）等；
(2)、＜meta name="keywords" contect=""＞向搜索引擎說明你的網頁的關鍵詞；
(3)、＜meta name="Description" contect=""＞告訴搜索引擎你的站點的主要內容；
(4)、＜meta name="Author" contect="你的姓名"＞告訴搜索引擎你的站點的製作的作者；
(5)、＜meta name="Robots" contect="all | none | index | noindex | follow | nofollow"＞
其中的屬性說明如下：
設定爲all：文件將被檢索，且頁面上的鏈接可以被查詢；
設定爲none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設定爲index：文件將被檢索；
設定爲follow：頁面上的鏈接可以被查詢；
設定爲noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設定爲nofollow：文件將不被檢索，頁面上的鏈接可以被查詢
3.webapp裏主要的mate用途
<meta name="apple-touch-fullscreen" content="yes"> 添加到主屏幕後，全屏顯示。
<meta name="apple-mobile-web-app-capable" content="yes" />
這meta的作用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。
<meta name=”apple-mobile-web-app-status-bar-style” content=black” />
默認值爲default（白色），可以定爲black（黑色）和black-translucent（灰色半透明）。
注意： 若值爲“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁內容以應用程序風格顯示，並使狀態欄透明。
<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
說明： 這個link就是設置web app的放置主屏幕上icon文件路徑。
圖片尺寸可以設定爲57*57（px）或者Retina可以定爲114*114（px），ipad尺寸爲72*72（px）
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //將不識別郵箱
告訴設備忽略將頁面中的數字識別爲電話號碼
<link rel="apple-touch-icon" href="http://cdn.w3cfuns.com/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="http://cdn.w3cfuns.com/static/images/identity/HTML5_Badge_64.png" />
iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時，在手機HOME界面創建應用程序樣式的圖標。
<meta name="sharecontent" data-msg-img="縮略圖地址" data-msg-title="標題" data-msg-content="簡介" data-msg-callBack="" data-line-img="縮略圖地址" data-line-title="標題" data-line-callBack=""/>
