手機H5移動端WEB資源整合之meta標籤

1、相關網站使用meta的實例

youku首頁的Meta設置：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="優酷-中國領先視頻網站,提供視頻播放,視頻發佈,視頻搜索 - 優酷視頻" />
<meta name="keywords" content="視頻,視頻分享,視頻搜索,視頻播放,優酷視頻" />
<meta name="description" content="視頻服務平臺,提供視頻播放,視頻發佈,視頻搜索,視頻分享" />

騰訊網首頁的Meta設置：

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新聞 新聞中心 事實派 新聞頻道,時事報道">
<meta name="description" content="騰訊新聞，事實派。新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站">
<meta name="author" content="skeetershi" />

2、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 content="yes" name="apple-mobile-web-app-capable">

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

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

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

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

說明：忽略頁面中的數字識別爲電話，忽略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標準模式

說明：指定雙核瀏覽器默認以何種方式渲染頁面。PS：360瀏覽器支持