關於meta標籤的幾種設定
程式碼一：<meta name="renderer" content="webkit|ie-comp|ie-stand">
如果說小標題的meta 標籤你不懂，那麼下面幾個你該有點印象吧：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="X-UA-Compatible" content="edge" />對，就是說強制使用chrome 核心瀏覽或者IE最高版本瀏覽的程式碼，但這不是本文要討論的內容，提及只是為了過渡下，請再看小標題：
<meta 其實這個是360 提出來的“瀏覽器核心控制Meta標籤”（對，是360，不要看到這個數字就反感，但Jeff 覺得在這一點上，360 厚道多了）。參考360 官方文件的說明，你就知道這個meta 標籤的作用是為了照顧國內眾多“雙核瀏覽器”的使用者，你在網頁使用這段程式碼，如設定為<meta name="renderer" content="webkit"> ，則會強制使用webkit 核心進行渲染。
總得來說，我認為這是好事，畢竟新增這個meta標籤不是很費事效果卻不錯，“狠狠”地照顧了國內的小白使用者。Jeff 在最新開發的Mindia主題上已經添加了這個程式碼了，寫到這裡，我又突然想起國內某狗瀏覽器對我以前某個按HTML5 標準寫的網站居然預設是採用IE 核心渲染的所謂“智慧”。
程式碼二：<meta http-equiv="Cache-Control" content="no-siteapp" />
也是一段meta 標籤，N久以前，這段meta是這樣的，
<meta http-equiv="Cache-Control" content="no-transform " />這個meta 標籤是禁止百度轉碼的，在大概一兩年前，移動網際網路飛起，當時很多網站都沒有多移動端進行適配，國內的“百毒”公司就率先考慮到“使用者體驗”，本著“為人民幣服務”的原則，在移動端通過百度搜索過來的網頁會預設進行轉碼。
從搜尋引擎使用者角度，這看起來“喲，還不錯歐”，畢竟上網流量要錢嘛；從站長角度看，也還可以嘛，畢竟不是所有站長都有能力做移動端適配的，李彥巨集幫大家想到了不錯，還不用站長動一手一腳，你看多好！
但，尼瑪轉碼了居然還帶上自家廣告，廣告內容麼……這種既當運動員又當裁判的做法太噁心了。
一個公司之所以讓人噁心，常常不是因為本身乾的事情足夠噁心，而是表面上幹著好事背地裡齷蹉行為讓人噁心。
牆裂建議每位搞前端開發的都新增上這個程式碼，不要再給李首富捐錢了。
程式碼三：<a href="http://www.miitbeian.gov.cn" rel="nofollow" rel="nofollow" target="_blank">X ICP備xxxxx號.</a>
這個就不多說了，畢竟咱網站下邊就掛著這個，雖然是被某部門要求掛上的。對於這些事情，我們要用平常心對待，畢竟掛上這個對於我們這些小網站也不是太礙眼，你看人家某浪的網頁下面：
不過要注意一點，你一定要在a 連結這裡新增這個 rel=”nofollow”，為什麼捏，看這篇文章你就知道了《中國唯一一個PR10的網站》。
妥協，也是最小的妥協。
程式碼四：<meta name="applicable-device" content="pc,mobile">
自適應就是使用相同的網址不考慮使用者瀏覽器UA，向不同裝置的使用者提供同一套html程式碼。
自適應也叫響應式，可以自動識別螢幕寬度並作出相應調整設計。
在<head>中標識<meta name="applicable-device"content="pc,mobile">，並使用<picture>元素處理自適應圖片，即可成功自適應。
<meta name="viewport" content="width=device-width, initial-scale=1.0">作用是設定顯示寬度和手機螢幕寬度一樣，也就是滿屏顯示。
程式碼五:<meta name="MobileOptimized" content="width"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
width: viewport 的寬度 （範圍從 200 到 10,000 ，預設為 980 畫素 ）
height: viewport 的高度 （範圍從 223 到 10,000 ）
initial-scale: 初始的縮放比例 （範圍從>0到 10 ）
minimum-scale: 允許使用者縮放到的最小比例
maximum-scale: 允許使用者縮放到的最大比例
user-scalable: 使用者是否可以手動縮放
下面是我們經常用到的一些標籤，由於瀏覽器的差異，並不能百分百相容。
<!-- 是否刪除預設的蘋果工具欄和選單欄 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 其他的meta設定 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持裝置優化，主要是針對一些老的不識別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">此外，apple還有兩個有趣的標籤：
1.apple-touch-icon
< link rel= "apple-touch-icon" sizes= "76x76" href= "touch-icon-ipad.png">
如果 apple-mobile-web-app-capable 設定為 yes 了，那麼在蘋果機的safari上可以通過新增到主屏按鈕將網站新增到主螢幕上。而設定相應 apple-touch-icon 標籤，則新增到主屏上的圖示就會使用我們指定的圖片。
- apple-touch-startup-image
< link rel= "apple-touch-startup-image" href= "/startup.png">
基於 apple-mobile-web-app-capable 設定為 yes ，可以為WebApp設定一個類似NativeApp的啟動畫面。和 apple-touch-icon 不同， apple-mobile-web-app-capable 不支援sizes屬性，要使用media來載入不同的啟動畫面。詳細查詢 大漠的文章 。
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
這就是一些meta標籤的應用,如在後續工作中遇到將繼續新增.