H5中的 meta 标签及 移动页面单位
1、定义文档关键词，用于搜索引擎：（<= 874 个字符）
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
2、定义web页面描述：
<meta name="description" content="Free Web tutorials on HTML and CSS">
3、定义页面作者：
<meta name="author" content="Hege Refsnes">
4、每30秒刷新页面：
<meta http-equiv="refresh" content="30">
5、规定 HTML 文档的字符编码：
<meta charset="UTF-8">
6、搜索引擎索引方式
<meta name="robots" content="index,follow" />
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
7、移动设备
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从223 到10,000）
initial-scale：初始的缩放比例 （范围从>0 到10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes) -->
8、WebApp全屏模式：伪装app，离线应用。
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
9、忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
10、忽略识别邮箱
<meta content="email=no" name="format-detection" />
11、针对手持设备优化，主要是针对一些老的不识别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">
12、优先使用 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 -->
13、浏览器内核控制
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 国内双核浏览器默认内核模式如下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式） -->
14、禁止浏览器从本地计算机的缓存中访问页面内容
<meta http-equiv="Pragma" content="no-cache">
15、Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
16、转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta
<meta http-equiv="Cache-Control" content="no-siteapp" />
常用的移动页面单位
使用到的最多的单位就是px（像素）。像素属于绝对度量单位；
1、百分比
2、em与rem
em：em指的是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。换句话说，如果当前div的字体大小是12像素，那么1em就是12像素，如果div字体大小是24像素，1em就是24像素。
rem：rem是相对于根元素的字体大小进行设置的，如果html元素中的字体大小设置为24px，那么针对任意html内的元素设置1rem，均表示的是24px，（另外，当rem能够和JS去配合时，能够很好的解决移动端的各种像素大小问题——JS获取设备宽度，然后根据设备宽度调整html元素这个根元素的字体大小，在html元素中的所有元素，均使用rem相对度量单位）。
rem的支持程度：IE9及以上所有浏览器，安卓2.1以上版本，iOS4.0以及以上版本的safari（换句话说，IE6-8不兼容）
3、vw和vh
vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
vw、vh是针对移动设备的，如果视窗大小发生变化，这两个值也会跟着相应的变化。应该说，这两种单位非常好用，在项目中，自己采用vw和vh之后，瞬间兼容所有设备，心情大好。但是，不是所有浏览器都支持。
移动端事件
1、tap 事件
Tap 和 click 两者都会在点击时触发，但是在手机WEB端，click会有 200~300 ms，所以请用tap代替click作为点击事件。
singleTap 和 doubleTap 分别代表单次点击和双次点击。
2、touch事件
touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。其中包括：
touchstart、touchmove、touchend、touchcancel 这四个事件，这4个事件的触发顺序为：touchstart -> touchmove-> …… -> touchcancel ->touchend
