作為前端開(kāi)發(fā)卸夕，我們經(jīng)常與meta標(biāo)簽打交道贰镣，meta標(biāo)簽中有和seo相關(guān)的keyword艳悔、description等，還有與移動(dòng)端的實(shí)際尺寸與網(wǎng)頁(yè)尺寸的比例等

設(shè)置編碼

<meta charset='utf-8' />

charset可以選擇gb2312、GBK,iso-xxx磅轻、UTF-8等，國(guó)際范例都是選擇UTF-8，gb2312和GBK只會(huì)在國(guó)內(nèi)使用踏枣，而且有時(shí)會(huì)出現(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 -->

這個(gè)想來(lái)是不用解釋了(其實(shí)是作者大大不知道怎么解釋茵瀑，詞窮)

瀏覽器內(nèi)核控制

<meta name="renderer" content="webkit|ie-comp|ie-stand">

國(guó)內(nèi)瀏覽器很多都是雙內(nèi)核（webkit和Trident）,webkit內(nèi)核高速瀏覽，IE內(nèi)核兼容網(wǎng)頁(yè)和舊版網(wǎng)站躬厌。 而添加meta標(biāo)簽的網(wǎng)站可以控制瀏覽器選擇何種內(nèi)核渲染马昨。

國(guó)內(nèi)雙核瀏覽器默認(rèn)內(nèi)核模式如下：360極速瀏覽器、遨游瀏覽器：Webkit內(nèi)核（極速模式）扛施。

禁止瀏覽器從緩存中訪問(wèn)數(shù)據(jù)

<meta http-equiv="Pragma" content="no-cache">

這么設(shè)置用戶無(wú)法脫機(jī)訪問(wèn)鸿捧，如果想做離線應(yīng)用不要添加這個(gè)標(biāo)簽

避免百度轉(zhuǎn)碼申明

<meta http-equiv="Cache-Control" content="no-siteapp" />

用百度訪問(wèn)時(shí)，有可能被轉(zhuǎn)碼疙渣，避免轉(zhuǎn)碼可添加這個(gè)meta

SEO優(yōu)化

<meta name="keywords" content="your tags" />
<meta name="description" content="150 words" />

keywords是頁(yè)面關(guān)鍵字笛谦，description是頁(yè)面的描述，這兩個(gè)是一個(gè)網(wǎng)站做seo必備的兩個(gè)標(biāo)簽昌阿。(這個(gè)是重點(diǎn)饥脑，考試要考)

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" />

只有在開(kāi)啟WebApp全屏模式時(shí)才生效灶轰。 content的值為default | black | black-translucent 。

添加到主屏后的標(biāo)題

<meta name="apple-mobile-web-app-title" content="標(biāo)題">

忽略數(shù)字自動(dòng)識(shí)別為電話號(hào)碼

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

忽略識(shí)別郵箱

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

強(qiáng)制豎屏

<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">

windows phone 點(diǎn)擊無(wú)高光

<meta name="msapplication-tap-highlight" content="no">

移動(dòng)端常用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">

第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1刷钢，并且文檔最大的寬度比例是1.0笋颤，且不允許用戶點(diǎn)擊屏幕放大瀏覽；
width - viewport的寬度 height - viewport的高度 initial-scale - 初始的縮放比例 minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例 user-scalable - 用戶是否可以手動(dòng)縮放
第二個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽内地，它表示：允許全屏模式瀏覽伴澄；
第三個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽，它指定的iphone中safari頂端的狀態(tài)條的樣式阱缓；
第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼非凌。

天貓

<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>手機(jī)網(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">