關於HTML中Meta標籤的那些事

　　Meta標籤是HTML語言head區的一個輔助性標籤，它位於HTML文件頭部的head標記和title標記之間，它提供使用者不可見的資訊。它可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵字），或其他web服務。

　　我現將前端頁面開發常用到的meta標籤內容整理成文，加入了移動端web開發meta信息，供需要時查閱。

# 　　1、申明文件所使用的字元編碼

<meta charset=&#39;utf-8&#39;>

# 　　或

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

　　此 meta 標籤定義了 HTML 頁面所使用的字元集為 utf-8 ，就是萬國碼。它可以在同一頁顯示中文簡體、繁體及其它語言（如日文，韓文）等。當然，你也可以使用gb2312（簡體中文），big5（繁體中文）等等其他字元集。

　　而目前我們一般建議使用第一種寫法，也是HTML5所使用的寫法。

　　2、宣告使用的瀏覽器及版本

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

　　當指定的content值為IE=edge,chrome=1時，優先使用 IE 最新版本和 Chrome。假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，否則，將會使用客戶端IE最高的標準模式對頁面進行渲染。

　　還有以下幾種設定方式：

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

　　3、SEO最佳化相關

# 　　頁面描述，每個網頁都應有一個不超過 150 個字元且能準確反映網頁內容的描述標籤。

<meta name="description" content="不超过150个字符" />

　　頁面關鍵字，每個網頁應具有描述該網頁內容的一組唯一的關鍵字。

　　使用人們可能會搜索，並準確描述網頁上所提供資訊的描述性和代表性關鍵字及短語。

<meta name="keywords" content="html5, css3, 关键字"/>

　　定義網頁作者，非必要

<meta name="author" content="月光光" />

　　4、頁面重定向和刷新：content內的數字代表時間（秒），既多少時間後刷新。如果加url,則會重定向到指定網頁。

<meta http-equiv="Refresh"  contect="5;url=http://www.php.cn" />

　　上述程式碼表示停留5秒鐘後自動刷新跳到URL網址http://www.php.cn

# 　　5、Expires網頁過期時間

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

# 　　設定網頁的到期時間，一旦過期則必須到伺服器上重新調用，需要注意的是必須使用GMT時間格式，或直接設為0(不緩存)。

　　6、Pragma禁止本地快取

<meta http-equiv="Pragma" contect="no-cache" />

　　設定網頁不會儲存在快取中，每次造訪都會重新整理頁面。這樣設定，訪客將無法離線瀏覽。

　　7、viewport行動裝置螢幕視覺區域

# 　　由於行動裝置螢幕寬度不同於傳統 web，因此我們需要改變 viewport 值。

　　大部分4.7-5吋設備的viewport寬設為360px；5.5吋設備設為400px；iphone6設為375px；ipone6 plus設為414px。

　　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=no" />

　　強制讓文件與裝置的寬度保持 1:1 ;

　　文件最大的寬度比列是1.0（ initial-scale 初始刻度值和 maximum-scale 最大刻度值）；

# 　　user-scalable 定義使用者是否可以手動縮放（ no 為不縮放），使頁面固定設備上面的大小；

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

body { 
    min-width: 320px; 
}

　　注意，很多人使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，用戶需要手動移動頁面或縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則使用者將無法放大/縮小網頁來看到全部的內容。

　　對於行動裝置上的meta還有以下一些設定。

　　8、WebApp全螢幕模式：偽裝app，離線應用。

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

　　9、隱藏狀態列/設定狀態列顏色：只有在開啟WebApp全螢幕模式時才生效。 content的值為default | black | black-translucent 。

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

　　10、加入主畫面後的標題

<meta name="apple-mobile-web-app-title" content="标题" />

　　11、忽略數字自動辨識為電話號碼

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

　　12、忽略識別郵箱

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

以上是關於HTML中Meta標籤的那些事的詳細內容。更多資訊請關注PHP中文網其他相關文章！