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

1、申明文檔使用的字符編碼

 meta charset= utf-8 

或

 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= url=http://www.survivalescaperooms.com / 

上述代碼表示停留5秒鐘后自動刷新跳轉到URL網址http://www.survivalescaperooms.com

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標簽的那些事的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。