常用meta标签

作为前端开发，我们经常与meta标签打交道，meta标签中有和seo相关的keyword、description等，还有与移动端的实际尺寸与网页尺寸的比例等

设置编码

<meta charset='utf-8' />

charset可以选择gb2312、GBK,iso-xxx、UTF-8等，国际范例都是选择UTF-8，gb2312和GBK只会在国内使用，而且有时会出现乱码，所以推荐charset使用utf-8。

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于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 -->

这个想来是不用解释了(其实是作者大大不知道怎么解释，词穷)

浏览器内核控制

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

国内浏览器很多都是双内核（webkit和Trident）,webkit内核高速浏览，IE内核兼容网页和旧版网站。 而添加meta标签的网站可以控制浏览器选择何种内核渲染。

国内双核浏览器默认内核模式如下：360极速浏览器、遨游浏览器：Webkit内核（极速模式）。

禁止浏览器从缓存中访问数据

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

这么设置用户无法脱机访问，如果想做离线应用不要添加这个标签

避免百度转码申明

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

用百度访问时，有可能被转码，避免转码可添加这个meta

SEO优化

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

keywords是页面关键字，description是页面的描述，这两个是一个网站做seo必备的两个标签。(这个是重点，考试要考)

WebApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" />

启用全屏模式, 伪装app，离线应用。

隐藏状态栏/设置状态栏颜色

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

只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

忽略数字自动识别为电话号码

<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标签

<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标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 user-scalable - 用户是否可以手动缩放
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

天猫

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

网易

<title>手机网易网</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>淘宝网触屏版</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 版权所有">
<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">