下面全是本人在移动端开发中亲历问题与经验的总结，持续更新……
手机页面开发，怎么能离开远程调试工具呢，这里推荐weinre
开启3D GPU加速，使用
translateZ(0)。最大的好处，它使用了硬件加速功能。适用问题：IOS webview滚动动画失效（见我的博客–移动端下拉刷新与滚动加载踩坑），滚动时页面抖动，提升滚动流畅性，部分安卓机事件失效（例如focus、touch、click等事件均无效）叠加区高亮，在部分android机型中点击页面某一块区域可能会出现如图所示的黄色框秒闪，这是部分机型系统自身的默认定制样式，给该元素一个CSS样式重置掉：
-webkit-tap-highlight-color:rgba(0,0,0,0);页面进行惯性滑动的时候（手指松开的滑动），处于性能的考虑，浏览器是会把页面上的渲染进行锁定的状态。也就说，当页面进行滑动的时候，js动态修改上面的元素是无效的。直到页面滚动停止，这是个非常特殊的规则。在IOS和android上都会存在，在ios上显得突出。在日常评估的时候，一定需要这个特性，这个特性决定了某些滑动中的功能是无法实现的，比如说某个元素到某个位置从static变成fixed的状态，或者进行状态转换。在滑动的时候，即使js动态设置了，页面也不会响应，直到滚动结束。
我之前在做ios webapp时，在ios的系统里，网页头了，还能继续往上面拉，有一个力反馈的效果，看上去是把整个页面往下拉了。这个问题是ios的设置的问题，IOS开发可以设置解决，前端开发就不懂怎么设置了
meta的viewport，设置initial-scale的时候，部分安卓机只支持1.0的缩放，所以安卓机一律不做高清适配，统一1.0，IOS系统需要根据设备像素比做高清适配
meta功能要用好，屏蔽电话号码等功能很实用,第1个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； 第2个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式； 第3个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码，第4个不识别邮箱
1
2
3
4<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" />使用css动画，不要使用js动画
css动画请使用transform，而非直接控制width,height,margin，否则会造成大量的计算，性能堪忧。transfrom会把元素独立出来单独计算的。如果非要直接控制宽高，可以开启3D加速
click的300ms延迟响应，需要使用fastclick库，通过touch的事件完成tap，替代click（所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成）
当网页上图片比较多的时候，使用lazyload，原理： 添加data-src属性保存图片的url，当图片出现在可视区域内，通过js代码把data-src属性拷贝到src，给Img添加src属性
跨域问题。手机浏览器也是浏览器，在ajax调用外部api的时候也存在跨域问题。当然利用 cordova 打包后，由于协议不一样就不存在跨域问题了。让后端加上两个http头：第一个头可以避免跨域问题，第二个头可以方便ajax请求设置content-type等配置项
1
2Access-Control-Allow-Origin "*"
Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"使用rem做适配
使用flex布局，同时使用auto-prefixer保证兼容性
部分安卓机touchstart,touchmove,touchend事件失效,可以添加
e.preventDefault()，如果还不行再开启3D加速试试。touchstart和touchend添加e.preventDefault()会造成单击事件失效,a标签也会失效关于在touch事件中设置
e.preventDefault()，这样会阻止浏览器的默认行为，比如touchstart与touchend中添加了e.preventDefault()，如果里面包含a标签，那么跳转将会失效。另外，touch事件在往上拉或者往下拉的时候，由于惯性，在安卓机中，会把奇怪的背景色拉出来盖到页面上，虽然时间很短，但是仔细观察还是可以发现IOS 浏览器上 new Date(“2016-09-30”) 会报
invalid date，把-换成/则没有问题，安卓和chorme不存在该问题在网页上拨打电话，使用
<a href=”tel:12345678 ”>拨打电话</a>，不要使用location.href='tel:12345678'，经测试location.href='tel:12345678'这种方法在安卓上可以，但在ios上失效ios系统和部分安卓系统，在应用进入后台运行时，页面上的js会停止运行，这个特性可能会带来一系列问题，我遇到的一个问题是页面上跑的计时器失效。 解决办法： 进入页面的时候获取服务器时间，再通过js获取本地时间，通过服务器时间-本地时间得到一个时间差diffValue，后面需要取服务器时间的时候，只需要js获取本地时间再加上diffValue即可。因为应用进入后台，手机系统的时间不会变，js取当前时间取得是手机时间
webview下写的页面,当弹出一个半透明全屏的弹框后,在弹框上用手指滑动，弹框下面的页面是会跟着动的。即滚动穿透问题，解决办法：在弹框下的滚动页面的容器上加了一个
overflow：auto滚动就不穿透了。最好是在弹框出现时给下层加上属性，弹框取消时该属性去掉，因为可能会造成touchmove中e.preventDefault等属性带来的兼容性问题。
