H5中的 meta 标签及 移动页面单位

一、定义文档关键词，用于搜索引擎：（<= 874 个字符）

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

二、定义web页面描述：

<meta name="description" content="Free Web tutorials on HTML and CSS">

三、定义页面做者：

<meta name="author" content="Hege Refsnes">

四、每30秒刷新页面：

<meta http-equiv="refresh" content="30">

五、规定 HTML 文档的字符编码：

<meta charset="UTF-8">

六、搜索引擎索引方式

<meta name="robots" content="index,follow" />
<!-- all：文件将被检索，且页面上的连接能够被查询； none：文件将不被检索，且页面上的连接不能够被查询； index：文件将被检索； follow：页面上的连接能够被查询； noindex：文件将不被检索； nofollow：页面上的连接不能够被查询。 -->

七、移动设备

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

八、WebApp全屏模式：假装app，离线应用。

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

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

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

十、忽略识别邮箱

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

十一、针对手持设备优化，主要是针对一些老的不识别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">

十二、优先使用 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 -->

1三、浏览器内核控制

 <meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 国内双核浏览器默认内核模式以下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式） -->

1四、禁止浏览器从本地计算机的缓存中访问页面内容

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

1五、Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

1六、转码申明：用百度打开网页可能会对其进行转码（好比贴广告），避免转码可添加以下meta

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

 经常使用的移动页面单位

　　使用到的最多的单位就是px（像素）。像素属于绝对度量单位；

　　一、百分比

　　二、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不兼容）

　　三、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  分别表明单次点击和双次点击。

　　二、touch事件

　　　　touch是针对触屏手机上的触摸事件。现今大多数触屏手机webkit内核提供了touch事件的监听，让开发者能够获取用户触摸屏幕时的一些信息。其中包括：　　　　　　　　　　　　　　

　　　　touchstart、touchmove、touchend、touchcancel 这四个事件，这4个事件的触发顺序为：touchstart  ->  touchmove-> …… -> touchcancel ->touchend