你對Meta標簽了解多少？-創(chuàng)新互聯(lián)

小伙伴，在我們?nèi)粘懢W(wǎng)頁的時候有沒有注意過Meta 標簽，你對它了解多少呢？Meta標簽是HTML語言head區(qū)的一個輔助性標簽，它位于HTML文檔頭部的head標記和title標記之間，它提供用戶不可見的信息。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他web服務(wù)。
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、連江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為連江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

今天給大家分享一下關(guān)于Meta 標簽的常見功能分別由 移動端 和 PC 端的：

你對 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時，優(yōu)先使用 IE 最新版本和 Chrome。假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，否則，將會使用客戶端IE最高的標準模式對頁面進行渲染。

還有以下幾種設(shè)置方式：

 <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以目前可用的最高模式顯示內(nèi)容-->

3、SEO優(yōu)化相關(guān)

頁面描述，每個網(wǎng)頁都應(yīng)有一個不超過 150 個字符且能準確反映網(wǎng)頁內(nèi)容的描述標簽。

<meta name="description" content="不超過150個字符" />

頁面關(guān)鍵詞，每個網(wǎng)頁應(yīng)具有描述該網(wǎng)頁內(nèi)容的一組唯一的關(guān)鍵字。

使用人們可能會搜索，并準確描述網(wǎng)頁上所提供信息的描述性和代表性關(guān)鍵字及短語。

<meta name="keywords" content="html5, css3, 關(guān)鍵字"/>

定義網(wǎng)頁作者，非必要

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

4、頁面重定向和刷新：content內(nèi)的數(shù)字代表時間（秒），既多少時間后刷新。如果加url,則會重定向到指定網(wǎng)頁。

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

上述代碼表示停留5秒鐘后自動刷新跳轉(zhuǎn)到URL網(wǎng)址http://www.helloweba.com。

5、Expires網(wǎng)頁過期時間

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

設(shè)定網(wǎng)頁的到期時間，一旦過期則必須到服務(wù)器上重新調(diào)用，需要注意的是必須使用GMT時間格式，或直接設(shè)為0(不緩存)。

6、Pragma禁止本地緩存

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

設(shè)定網(wǎng)頁不保存在緩存中，每次訪問都刷新頁面。這樣設(shè)定，訪問者將無法脫機瀏覽。

7、viewport移動設(shè)備屏幕可視區(qū)域

由于移動設(shè)備屏幕寬度不同于傳統(tǒng) web，因此我們需要改變 viewport 值。

大部分4.7-5寸設(shè)備的viewport寬設(shè)為360px；5.5寸設(shè)備設(shè)為400px；iphone6設(shè)為375px；ipone6 plus設(shè)為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" />

強制讓文檔與設(shè)備的寬度保持 1:1 ；

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

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

注意：實際測試中發(fā)現(xiàn)，有些安卓系統(tǒng)自帶的瀏覽器并不支持這一條規(guī)則，能夠?qū)撁孢M行放大，一旦放大響應(yīng)的 box 也隨之放大，導致頁面出現(xiàn)錯亂問題，解決方法：定義頁面的最小寬度。

body { 
    min-width: 320px; 
 }

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

對于移動設(shè)備上的meta還有以下一些設(shè)置。

8、WebApp全屏模式：偽裝app，離線應(yīng)用。

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

9、隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色：只有在開啟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、忽略數(shù)字自動識別為電話號碼

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

12、忽略識別郵箱

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

今天就分享到這里，祝小伙伴們學習愉快！也謝謝大家對小月博客的關(guān)注。

========================================================

小月博客

http://www.aliyue.net

WEB