移動端填坑之路

搞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...