xH5页面窗口自动调整到设备宽度，并禁止用户缩放页面

元名称='视口'内容='宽度=设备宽度，初始比例=1.0，最小比例=1.0，更大比例=1.0，用户比例=否'/

忽略将页面中的数字识别为电话号码

meta name=' format-detection ' content=' telephone=no '/

忽略机器人平台中对邮箱地址的识别

meta name=' format-detection ' content=' email=no '/

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的旅行队

meta name=' apple-mobile-web-app-ability ' content=' yes '/

！- ios7.0版本以后，safari上已看不到效果-

将网站添加到主屏幕快速启动方式，仅针对ios的旅行队顶端状态条的样式

meta name=' apple-mobile-web-app-status-bar-style ' content=' black '/

！-可选默认、黑色、黑色半透明-

视口模板

视口模板——通用

！声明文档类型

超文本标记语言

头

meta charset='utf-8 '

元内容='宽度=设备宽度，初始比例=1.0,更大比例=1.0,用户可缩放=否'名称='视口'

meta content=' yes ' name=' apple-mobile-web-app-ability '

meta content=' black ' name=' apple-mobile-web-app-status-bar-style '

元内容='电话=否'名称='格式-检测'

meta content=' email=no ' name=' format-detection '

标题标题/title

链接rel='样式表href='index.css '

/head

身体

这里开始内容

/body

/html

视口模板目标密度dpi=设备dpi，android 2.3.5以下版本不支持

！声明文档类型

超文本标记语言

头

meta charset='utf-8 '

meta name=' viewport ' content=' width=750，user-scalable=no，target-densitydpi=device-dpi '！-宽度取值与页面定义的宽度一致-

meta content=' yes ' name=' apple-mobile-web-app-ability '

meta content=' black ' name=' apple-mobile-web-app-status-bar-style '

元内容='电话=否'名称='格式-检测'

meta content=' email=no ' name=' format-detection '

标题标题/title

链接rel='样式表href='index.css '

/head

身体

这里开始内容

/body

/html

参考案例：http://action.weixin.qq.com/payact/readtemplate？t=mobile/2015/wxzfsht/index _ tmpl

常见问题

移动端如何定义字体字体系列

中文字体使用系统默认即可，英文用Helvetica

/* 移动端定义字体的代码*/

正文{ font-family : Helvetica；}

参考《移动端使用字体的思考》

移动端字体单位字体大小选择像素还是雷姆

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用像素即可

对于需要适配各种移动设备，使用雷姆，例如只需要适配苹果手机和苹果平板电脑等分辨率差别比较挺大的设备

雷姆配置参考：

html{font-size:10px}

@ media screen and(最小宽度：321 px)and(更大宽度：375 px){ html { font-size 336011 px } }

@ media screen and(最小宽度：376 px)and(更大宽度：414 px){ html { font-size 336012 px } }

@ media screen and(最小宽度：415 px)and(更大宽度：639 px){ html { font-size 336015 px } }

@ media screen and(最小宽度：640 px)and(更大宽度：719 px){ html { font-size 336020 px } }

@ media screen and(最小宽度：720 px)and(更大宽度：749 px){ html { font-size 336022.5 px }

@媒体屏幕和(最小宽度：750 px)和(更大宽度：799 px){ html { font-size :23.5 px } }

@媒体屏幕和（最小宽度：800像素){ html { font-size 336025像素}

移动端触控事件（区分内核和winphone)

当用户手指放在移动设备在屏幕上滑动会触发的触控事件

以下支持内核

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用事件的preventDefault()可以阻止默认情况的发生：阻止页面滚动

touchend——当手指离开屏幕时触发

touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面警报()一个提示框，此时会触发该事件，这个事件比较少用