移动端前端开发注意点
第一次接触移动端开发，发现web端和移动端的差别还是很大的，我主要记录移动端的一些内容：
- 移动端与web端在网页设计与交互方面的差别
- 移动端注意点
- 一些小技巧
- 移动端的一些问题及解决方法
移动端与web端在网页设计与交互方面的差别
纯粹是个人看法。
在web端是尽可能地展示丰富的功能，并且较为复杂，一个页面可以包含很多的内容。当然在交互方面也是相对复杂些，一般不是直接把“下一步”放在用户面前，而是让用户自己去找。
而移动端设计应以简约为主,一个页面可能只有一个功能，并且操作起来一定要便捷。代码量不能太大，不然加载起来速度会比较慢。
移动端注意点
推荐几篇博文
在开始移动端的开发前，我先搜罗了别人写的博客，感觉有几篇文章还是不错的，分享出来给大家看看。
手机/移动前端开发需要注意的20个要点
“移动端”宴席知多少
移动web前端开发时注意事项
浏览器兼容问题
组长的要求还是比较严格的，希望移动端，web端都能兼容。于是我真的做了非常多的尝试。
由于移动端的浏览器大多数都是基于webkit内核的，因此对css3和html5的支持都比较好。所以大家可以放心的用了。这里推荐一个网站，可以验证兼容性的，感觉很好用：can I use.
移动端的特殊设计
移动端的设计都遵循着一些规则，比如，一般app的底部导航栏的高度都跟微信公众平台的底部菜单栏高度一致，为45px。
一般提交按钮或者其他标签与屏幕的边距一致，并且不随屏幕大小的变化而变化。
因为手机的配置不够高，所以尽量减少代码量，尤其是css，简约的设计加流畅的速度，一举两得。
一些小技巧
运用display:flex
弹性盒模型在布局上是非常灵活、便捷的，而且大大减少了代码量。
在web端上flexbox支持IE10+,safari6.1+,支持chrome,opera以及firefox，记得加前缀。
关于flexbox的相关知识可以查看flex语法篇、详解弹性盒模型。
之前我发现display:flex在微信浏览器和qq浏览器不兼容。微信浏览器用的是qq浏览器的内核，支持旧版的弹性盒模型。可以使用dispaly:box，当然前面要加-webkit-和-moz-的前缀。关于旧版的请见文章：旧版弹性盒模型。
box-sizing的妙用
box-sizing真是救世主般的存在。
有时候明明设置了宽度、高度，可突然发现后面需要加padding、border了，可是我想保持总的宽度和高度怎么办？这个时候box-sizing就可以发挥妙用了。box-sizing:border-box，这下padding和border都可以被算到width里了。如果还想按照原来的，那就设置为content-box就行了。
单位
一般web端使用px，但移动端一般多会采用em和rem，让单位成为一个不是固定数值的而是一个比例。
这方面可以多看看文章。
图片
不用换的作为背景的图片那就直接用background:url();另外还可以设置是否repeat，以及background-size和background-position等。
但是要换的图片一定不能放在css里面，不然就改不了了。
touch事件
可以直接参考jquery mobile。
在js中其实就是这几个事件而已：
touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表
touches: //当前屏幕上所有手指的列表
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches
changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX / clientY: //触摸点相对浏览器窗口的位置
pageX / pageY: //触摸点相对于页面的位置
screenX / screenY: //触摸点相对于屏幕的位置
identifier: //touch对象的ID
target: //当前的DOM元素
这里引用了别人写的，加个链接：JS移动客户端–触屏滑动事件。
但是在touch事件里也发现了一些问题。
移动端的一些问题及解决方法
jquery mobile的swipe事件在安卓的微信浏览器及原生浏览器里不敏感
这是个很严重的问题，意味着用户体验会非常不好。因为安卓机的优化不好，导致了触摸不灵敏。
经测试，在安卓的chrome浏览器里完美支持，在原生及微信浏览器里经常滑不出来。
解决方法：1.采取硬件加速。css的3D动画会使GPU开启强制渲染，所以我们可以采取假3D方法对一个元素进行操作。
可以写成：
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Other transform properties here */
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
在 Chrome and Safari中，当我们使用CSS transforms 或者 animations时可能会有页面闪烁的效果，下面的代码可以修复此情况：
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/* Other transform properties here */
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
在webkit内核的浏览器中，另一个行之有效的方法是：
.cube {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/* Other transform properties here */
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
但是硬件加速同样存在问题：
使用GPU可能会导致严重的性能问题，因为它增加了内存的使用，而且它会减少移动端设备的电池寿命。
并且经过亲测，灵敏度略有提高，但还是达不到理想的效果。
（博主的手机也不差吧，努比亚z9max，希望大家可以把测试的结果告诉我哦）
设置长按事件但浏览器默认的提示菜单也会跳出来
别一棍子打死，认为浏览器默认的就无法改变。
首先可以考虑取消浏览器默认事件，其他的事件也可以阻止。
在iPhone中很好解决，只要给长按的div设置两个css：
-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;- 1
- 2
在安卓中：
window.ontouchstart = function(e) { e.preventDefault(); };- 1
但不知道为什么还是没能阻止提示菜单的出现，于是我又发现了一个：
document.oncontextmenu = function(){return false;};- 1
没想到成功阻止了。
但是，在chrome及其他浏览器都可以，但在微信浏览器里还是无法实现。(⊙o⊙)…
移动端开发的框架推荐
jquery mobile
这应该是很多人在用的移动端开发框架，方便。然而我却并不喜欢。
首先，jquery为了兼容性，有很多可能你根本用不到的地方，因此造成了空间的浪费。当然它的兼容性也是它强大的优势之一。
jquery mobile的一个优点是你可以选择一些组件进行下载，因此大小可控。然而他对不同手机的兼容性似乎并不是太好，比如安卓的微信浏览器。
SUI mobile
一个由淘宝团队开发的框架。基于zepto。
它的组件还是不错的，但是在布局、样式方面比较局限。到后面我基本都没怎么用它的组件，因为毕竟自己写比改别人代码方便。
基于zepto让他既有优势又充满劣势。
zepto算是jquery的阉割版，因此文件小了很多。可是有些在移动端常用的方法也没了，比如我最喜欢用的animate。所以要做动画只能原生或者用css3，当然，坑爹的微信浏览器似乎也没有非常好得支持css3,so….
weUI
这是一个在github上找到的框架，据说是微信团队开发的，还没使用，下次试试看。先放上链接weUI。
总结
能用原生就用原生，加快速度。。嘻嘻。。。