meta標籤

本頁面的head標籤內的meta元素設置以下：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="referrer" content="origin">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1">

 

meta基礎知識

meta指可提供有關頁面的元信息（meta-information),好比針對搜索引擎和更新頻度的描述和關鍵詞。標籤位於文檔的頭部，不包含任何內容。標籤的屬性定義了與文檔相關聯的名稱/值對。

分類：meta標籤可分爲兩大部分： http-equiv和name變量。

一、http-equiv

http-equiv至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確的顯示網頁內容。

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

說明：IE=edge告訴IE 使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame.

PS：谷歌添加一個插件：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），這個插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器。

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

說明：設定頁面使用的字符集

content的內容爲：

• GB2312，說明網站採用的編碼是簡體中文
• ISO-8859-1，說明網站採用的編碼是英文
• UTF-8，表明世界通用的語言編碼

PS: html5頁面直接使用<meta charset="utf-8">

二、name

name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要便於搜索引擎機器人查找信息和分類信息用。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

說明：H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面;

viewport的屬性：

• width: viewport的寬度
• height: viewport的高度
• initial-scale : 初始的縮放比例
• minimum-scale : 容許用戶縮放到的最小比例
• maximum-scale : 容許用戶縮放到的最大比例
• user-scalable : 用戶是否能夠手動縮放
• target-densitydpi = device-dpi" （android才生效）：設備的密度等級

<meta name="viewport" content="width=720, user-scalable=no, target-densitydpi=device-dpi">

說明：H5頁面窗口寬度爲720px(根據設計圖稿的尺寸來決定)，並禁止用戶縮放頁面。target-densitydpi針對android手機，其實就是充當縮放的功能。

target-densitydpi取值：能夠爲一個數值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 這幾個字符串中的一個。

當你設target-densitydpi = device-dpi時：

   華爲榮耀xx可視區寬度 =  設備寬度 * dpi比值  = 360 * (160/160) = 360

   小米1可視區寬度 =  設備寬度 * dpi比值  = 320 * (240/160) = 480

   聯想樂檬可視區寬度 =  設備寬度 * dpi比值  = 360 * (320/160)= 720

   魅藍可視區寬度 =  設備寬度 * dpi比值  = 432 * (400/160) = 1080

PS：根據上面的結論，我強烈建議不要使用 target-densitydpi = device-dpi， 由於不一樣設備上最終的可視區的寬度差別很大，除非你的app有爲之作處理（rem、em的相對單位寫法）。

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

說明：是否啓用WebApp全屏模式，刪除蘋果默認的工具欄和菜單欄。

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

說明：設置蘋果工具欄顏色

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

說明：忽略頁面中的數字識別爲電話，忽略email識別。

<meta name="screen-orientation" content="portrait">

說明：uc強制豎屏

<meta name="full-screen" content="yes">

說明：uc強制全屏

<meta name="x5-orientation" content="portrait">

說明：QQ強制豎屏

<meta name="x5-fullscreen" content="true">

說明：QQ強制全屏

<meta name="author" content="dashen" />

說明：標註網頁的做者

<meta name="keywords" content="新聞,新聞中心, 新聞頻道">

說明：頁面關鍵詞，用於被搜索引擎收錄

<meta name="description" content="新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站">

說明：頁面描述，用於搜索引擎收錄

<meta name="renderer" content="webkit">//默認webkit內核
<meta name="renderer" content="ie-comp">//默認IE兼容模式
<meta name="renderer" content="ie-stand">//默認IE標準模式