合適的meta，你選對了嗎?
對於網頁來說，meta data就是通過一些欄位資訊來描述一下當前網頁，以便瀏覽器和搜尋引擎在訪問到此網頁的時候，可以通過這些描述資訊來知道如何去解析此網頁資料。
meta標籤共有四個屬性：http-equiv、name、scheme和content;不同的屬性又有不同的引數值，這些不同的引數值就實現了不同的網頁功能。其中http-equiv顧名思義，常用來做http協議上的一些限制，其作用是把 content 屬性關聯到 HTTP 頭部。scheme 屬性用於指定要用來翻譯屬性值的方案。
簡單來說，就是meta標籤提供的是一個“鍵值對”，name/http-equiv作為鍵，content作為值，scheme不常用。
基於以上理念，meta標籤又常被用來作為SEO的有力提供。
常見的meta標識有：
//宣告文件使用的字元編碼 <meta charset=’utf-8′> //頁面描述 <meta name=”description” content=”網頁描述”/> //頁面關鍵詞 <meta name=”keywords” content=””/> //網頁作者 <meta name=”author” content=”name, [email protected]”/> 複製程式碼
這裡的charset其實是h5的新屬性，等同於<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
，作用是會在本網頁的http請求頭中新增：content-type: text/html; charset=UTF-8
這些是最正規的meta用法，基本上每個瀏覽器都支援，也是定義在標籤規範內的。
然而尷尬的是，就像當初script標籤本意也不是作為jsonp的用法一樣，現代瀏覽器支援的meta標籤完全超出了其初始的定義。
上文有說過，meta標籤的資訊使用者是不可見的，而且其簡單的鍵值對結構無疑是最簡單的傳遞網頁資訊的方式，才是瀏覽器廠商最終對meta標籤下手的原因，加上每個瀏覽器希望體現自身特色，最終導致了meta標籤的凌亂不堪。
其中有作為特定瀏覽器專用的meta標識。例：
//uc強制豎屏 <meta name=”screen-orientation” content=”portrait”> //QQ強制豎屏 <meta name=”x5-orientation” content=”portrait”> //UC強制全屏 <meta name=”full-screen” content=”yes”> //設定蘋果工具欄顏色 <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> 複製程式碼
這些其實都是瀏覽器廠商定製版本的meta，雖然不常見，但是一旦用上也能減少很多複雜的需求。
作為一個前端開發者，不得不說一句，還是很期待瀏覽器早日實現統一的。
逃。。。
下面是收集的meta標籤，以後有更多收集會及時更新，也希望網友有更多的meta標籤能不吝賜教：
//宣告文件使用的字元編碼 <meta charset=’utf-8′> //優先使用 IE 最新版本和 Chrome <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> //頁面描述 <meta name=”description” content=”網頁描述”/> //頁面關鍵詞 <meta name=”keywords” content=””/> //網頁作者 <meta name=”author” content=”name, [email protected]”/> //搜尋引擎抓取 <meta name=”robots” content=”index,follow”/> //為移動裝置新增 viewport <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> //新增智慧 App 廣告條 Smart App Banner（iOS 6+ Safari） <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> //設定蘋果工具欄顏色 <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> //啟用360瀏覽器的極速模式(webkit) <meta name=”renderer” content=”webkit”> //避免IE使用相容模式 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> //不讓百度轉碼 <meta http-equiv=”Cache-Control” content=”no-siteapp” /> //針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 <meta name=”HandheldFriendly” content=”true”> //微軟的老式瀏覽器 <meta name=”MobileOptimized” content=”320″> //uc強制豎屏 <meta name=”screen-orientation” content=”portrait”> //QQ強制豎屏 <meta name=”x5-orientation” content=”portrait”> //UC強制全屏 <meta name=”full-screen” content=”yes”> //QQ強制全屏 <meta name=”x5-fullscreen” content=”true”> //UC應用模式 <meta name=”browsermode” content=”application”> //QQ應用模式 <meta name=”x5-page-mode” content=”app”> //windows phone 點選無高光 <meta name=”msapplication-tap-highlight” content=”no”> //設定頁面不快取 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″> 複製程式碼
—— The End