移動web開發經驗總結

一、低版本Android下input有CSS3動畫會讓輸入框失去焦點，解決辦法是低版本Android下去掉全部CSS3動畫。
.ua-ios .ipt{-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;-ms-transition:all .5s;transition:all .5s}
.ua-oldAndroid .ipt {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;}

 

二、-webkit-user-modify: read-write-plaintext-only; 做用是去掉輸入框聚焦時候的白色背景 ；

可是這裏有一個問題，Android4.0以上的系統，當軟鍵盤激活出來的時候read-write-plaintext-only的輸入框不會居中在屏幕中間，這裏須要根據實際狀況進行取捨。

 

三、translate3d可讓IOS啓用硬件渲染，動畫效果會更加流暢，基本上能解決全部抖動；但在Android下帶來新的問題——只要頁面裏面有節點擁有transform屬性，輸入框都會不正常（聚焦不正常、輸入時上下抖動等），此外還會致使節點渲染變慢（如點擊出下啦菜單渲染緩慢）。

再次強調CSS3的動畫、投影在Android下儘可能避免。

.ua-ios .mail-list .list-item,
.ua-ios .menu-item,
.ua-ios .menu-split{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

 

四、Android 2.3.7 下不加透明border，會致使溢出隱藏失效。
.atts .att-preview{overflow:hidden;width:50px;height:50px;border:1px solid transparent;}

 

五、IOS下fixed定位（好比框架頂部提示信息），當鍵盤收起的時候會有殘影：fixed元素不會隨着鍵盤收起而移動到頁面頂部，而是保持在頁面中間，須要hack改爲絕對定位。

.frame-tips{position:fixed;z-index:30;left:0;top:0}
.ua-ios .frame-tips{position: absolute}

 

六、在iPad1等低版ios下，opacity和其餘屬性一塊兒改變，會致使transition中重複執行三次，因此要麼只改變opacity實現淡入淡出，要麼只改變非opacity屬性。

.mRead-reply .btn{position:absolute;right:0;top:0;/*opacity:0;*/overflow:hidden;display:block;width:64px}

 

七、在Android4.1下，若是textarea聚焦的時候，其高度或者其兄弟節點的高度產生變化，那麼textarea就會被軟鍵盤擋住而不會自動調整位置，這裏須要去掉全部效果，默認顯示輸入框展開狀態。因此Android下儘可能不要在textarea和input上作動畫。

 

八、Android下div的高度設置成100%，同時設置其overflow:auto;那麼滾動條就會出如今這個div上面。

這個時候會出現抖動，因此建議Android下頁面的滾動能且只能出如今body節點上面！