移动端填坑之路

搞PC项目，最头疼的莫过于作IE6/7/8的兼容性（很蛋疼的事）。而在现在移动端H5的兴起中，面对形形色色的机型，各类各样的品牌手机，致使我吗们FE们要作各类手机适配问题、样式兼容问题等等（巨烦，找问题还很差找）。如下是在移动端项目之路上所遇到的各类问题:

---

• UC浏览器——css3的坑

最近在作一个移动端项目，涉及到评论模块，有评论必有点赞功能，固然也就存在点赞动画效果，第一反应就是利用css3动画效果。

方案一:transition+伪元素 。方案二:transition。方案呢三:animation+伪元素。方案呢四:animation。
背景:项目最终是放在支付宝平台上的，而支付宝用的是UC内核。
在chrome、qq、微信等等打开都是没问题（perfect，觉得大功告成了...），谁知最后在支付宝（uc内核）打开...方案一/方案二/方案三都是一点效果都没有（这是针对安卓手机没效果，对于IOS效果仍是有的，可见乔布斯的强大啊）...呜呜呜...天啊，这是咋回事呢？

总结:在UC浏览器中，不支持伪元素使用css3动画，对于transition动画也不佳。提倡使用方案四...

• css动画请使用transform

当咱们使用css3的时候尽可能使用transform，而非直接控制width,height,margin，不然会形成大量的计算，性能堪忧。transfrom会把元素独立出来单独计算的。

• 页面底部放一个position为fixed的input输入框

1. IOS手机上，当input聚焦后输入框会飞（被输入法顶上去后并非紧贴输入法而是定位在正中间，并且位置能够被咱们随便上下移动），无法实现咱们想要的
2. 安卓手机上是正常的

• scroll滚动事件

1. qq浏览，uc浏览以及ios的浏览器，滚动时并不会时时触发scroll事件，但会触发touchmove(只有touch时触发touchmove)。只有当中止滚动后才会触发scroll。
2. 在安卓手机上相对来讲好不少

• -webkit-overflow-scrolling

• -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
  
  -webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会当即中止 */

  兼容性：目前就Safari 5.0以上的IOS手机支持该属性

• 待续中-ing...