作為前端開發(fā)，我們經(jīng)常與meta標(biāo)簽打交道，meta標(biāo)簽中有和seo相關(guān)的keyword、description等，還有與移動端的實際尺寸與網(wǎng)頁尺寸的比例等
設(shè)置編碼
<meta charset='utf-8' />
charset可以選擇gb2312、GBK,iso-xxx、UTF-8等，國際范例都是選擇UTF-8，gb2312和GBK只會在國內(nèi)使用，而且有時會出現(xiàn)亂碼，所以推薦charset使用utf-8。
優(yōu)先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 關(guān)于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
這個想來是不用解釋了(其實是作者大大不知道怎么解釋，詞窮)
瀏覽器內(nèi)核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">
國內(nèi)瀏覽器很多都是雙內(nèi)核（webkit和Trident）,webkit內(nèi)核高速瀏覽，IE內(nèi)核兼容網(wǎng)頁和舊版網(wǎng)站。 而添加meta標(biāo)簽的網(wǎng)站可以控制瀏覽器選擇何種內(nèi)核渲染。
國內(nèi)雙核瀏覽器默認(rèn)內(nèi)核模式如下：360極速瀏覽器、遨游瀏覽器：Webkit內(nèi)核（極速模式）。
禁止瀏覽器從緩存中訪問數(shù)據(jù)
<meta http-equiv="Pragma" content="no-cache">
這么設(shè)置用戶無法脫機訪問，如果想做離線應(yīng)用不要添加這個標(biāo)簽
避免百度轉(zhuǎn)碼申明
<meta http-equiv="Cache-Control" content="no-siteapp" />
用百度訪問時，有可能被轉(zhuǎn)碼，避免轉(zhuǎn)碼可添加這個meta
SEO優(yōu)化
<meta name="keywords" content="your tags" />
<meta name="description" content="150 words" />
keywords是頁面關(guān)鍵字，description是頁面的描述，這兩個是一個網(wǎng)站做seo必備的兩個標(biāo)簽。(這個是重點，考試要考)
WebApp全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
啟用全屏模式, 偽裝app，離線應(yīng)用。
隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
只有在開啟WebApp全屏模式時才生效。 content的值為default | black | black-translucent 。
添加到主屏后的標(biāo)題
<meta name="apple-mobile-web-app-title" content="標(biāo)題">
忽略數(shù)字自動識別為電話號碼
<meta content="telephone=no" name="format-detection" />
忽略識別郵箱
<meta content="email=no" name="format-detection" />
強制豎屏
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
windows phone 點擊無高光
<meta name="msapplication-tap-highlight" content="no">
移動端常用meta標(biāo)簽
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
第一個meta標(biāo)簽表示：強制讓文檔的寬度與設(shè)備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動縮放
第二個meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽，它表示：允許全屏模式瀏覽；
第三個meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式；
第四個meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。
天貓
<title>天貓觸屏版</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
網(wǎng)易
<title>手機網(wǎng)易網(wǎng)</title>
<meta charset="UTF-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<meta name="apple-itunes-app" content="app-id=425349261">
<meta name="apple-mobile-web-app-capable" content="yes">
淘寶
<title>淘寶網(wǎng)觸屏版</title>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta property="wb:webmaster" content="c51923015ca19eb1">
<meta name="author" content="m.taobao.com">
<meta name="copyright" content="Copyright ?m.taobao.com 版權(quán)所有">
<meta name="revisit-after" content="1 days">
<meta name="keywords" content="">
<meta name="description" content="">
京東
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
