一、移动端适配 1、H5页面窗口需要自动调整到设备宽度，并禁止用户缩放页面
一般情况下，在所有无线页面的头部，都要加上此viewport的设置，如果不加上此数值，会造成在某些webkit游览器中，游览器会根据自身的某些判断，自行做放大、缩小等，造成页面无法正常访问，特别是某些app中嵌入了webkit游览器来进行访问的时候， 会出现以上所说的情况，因此为了保证你说设计的网页在所有手机中显示保持一致，加上此设置
viewport中的设置数值一般不需要进行修改，因为现在的数值已经满足了绝大多数项目，当然会出现在非常特殊的页面里，需要用户进行手动缩放的操作，不过如果修改了数值，需要在不同的手机上进行详细的测试，否则会有你预期外的事情发生。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、禁止将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 3、忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 4、当网站添加到主屏幕快速启动方式，可隐藏地址栏（仅针对ios的safari有效） <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 --> 5、将网站添加到主屏幕快速启动方式（仅针对ios的safari） <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> 6、viewport模板viewport模板——通用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" 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 content="email=no" name="format-detection"> <title>标题</title> <link rel="stylesheet" href="index.css"> </head> <body> 这里开始内容 </body> </html>参考案例： ?t=mobile/2015/wxzfsht/index_tmpl
二、开发常见问题 1、移动端如何定义字体font-family中文字体使用系统默认，英文用Helvetica
/* 移动端定义字体的代码 */ body{font-family:Helvetica;}参考《 移动端使用字体的思考 》
2、移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可
对于需要适配各种移动设备，使用rem
媒体查询配置参考：
html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}} 3、移动端touch事件(区分webkit 和 winphone)当用户手指放在移动设备在屏幕上滑动会触发的touch事件
以下支持webkit
touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用
参数信息(changedTouches[0])
clientX、clientY在显示区的坐标
target：当前元素
参考： https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
以下支持winphone 8
MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指