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="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/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=""/>

微信分享頁面設置

html標簽裏面的<meta>標簽的作用

<meta> 元素可提供有關頁面的元信息（meta-information）例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等.並不是專門給搜索引擎而設的。
但其中的keyword 和 description 是搜索引擎來找到網頁的一個方式。

html的meta標簽、title 標簽、Description標簽、keyword 標簽是什概念？如果應用這些標簽？

?“<META>”（即通常所說的META標簽）。META標簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。

??在有關搜索引擎註冊、搜索引擎優化排名等網絡營銷方法內容中，通常都要談論META標簽的作用，我們甚至可以說，META標簽的內容設計對於搜索引擎營銷來說是至關重要的一個因素，尤其是其中的 “description”（網頁描述）和“Keywords”（關鍵詞）兩個屬性更為重要【參見網絡營銷教學網站的專文介紹：description Keywords 】。盡管現在的搜索引擎檢索信息的決定搜索結果的排名很少依賴META標簽中的內容，但META標簽的內容設計仍然是很重要的。

關於META標簽中的HTTP-EQUIV

?? HTML代碼實例中有一項內容是

??<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

??其作用是指定了當前文檔所使用的字符編碼為gb2312，也就是中文簡體字符。根據這一行代碼，瀏覽器就可以識別出這個網頁應該用中文簡體字符顯示。類似地，如果 將 “gb2312”替換為“big5”，就是我們熟知的中文繁體字符了。

??HTTP-EQUIV用於向瀏覽器提供一些說明信息，從而可以根據這些說明做出相應。HTTP-EQUIV其實並不僅僅只有說明網頁的字符編碼這一個作用，常用的HTTP-EQUIV類型還包括：網頁到期時間、默認的腳本語言、默認的風格頁語言、網頁自動刷新時間等。

關於META標簽中的"description"

?? HTML代碼實例中有關"description"中的代碼為：

??<meta name="description" content="網絡營銷教學網站提供《網絡營銷基礎與實踐》教學支持:網絡營銷課件,網絡營銷論文,網絡營銷實驗教學,電子商務論文,網絡營銷與電子商務書籍等">

??"description"中的content="網頁描述"，是對一個網頁概況的介紹，這些信息可能會出現在搜索結果中，因此需要根據網頁的實際情況來設計，盡量避免與網頁內容不相關的“描述”，另外，最好對每個網頁有自己相應的描述（至少是同一個欄目的網頁有相應的描述），而不是整個網站都采用同樣的描述內容，因為一個網站有多個網頁，每個網頁的內容肯定是不同的，如果采用同樣的description，顯然會有一些網頁內容沒有直接關系，這樣不僅不利於搜索引擎對網頁的排名，也不利於用戶根據搜索結果中的信息來判斷是否點擊進入網站獲取進一步的信息。

關於META標簽中的"Keywords"

??與META標簽中的"description"類似，"Keywords"也是用來描述一個網頁的屬性，只不過要列出的內容是“關鍵詞”，而不是網頁的介紹。這就意味著，要根據網頁的主題和內容選擇合適的關鍵詞。在選擇關鍵詞時，除了要考慮與網頁核心內容相關之外，還應該是用戶易於通過搜索引擎檢索的，過於生僻的詞匯不太適合做META標簽中的關鍵詞。關於META標簽中關鍵詞的設計，要註意不要堆砌過多的關鍵詞，羅列大量關鍵詞對於搜索引擎檢索沒有太大的意義，對於一些熱門的領域

WebApp 裏Meta標簽大全，webappmeta標簽大全