移動端WEBAPP開發遇到的坑，以及填坑方案！持續更新~~~~

前言：在移動端WEBAPP開發中會遇到各類各樣的問題，經過此文對遇到的問題作一個概括總結，方便本身往後查詢，也給各位前端開發友人作一個參考。

　　   此文中涉及的問題是本人開發中遇到的，解決方案是本人思考和查詢資料的結果，純屬於我的的看法，一個需求，縱有千百種實現方式，因此若有歧義，請溫柔吐槽！

　　　此文會持續更新，前期內容會比較雜亂，待Q&A積累到必定量後，會進行整理。

 

css3

一、Q：css3動畫在Ios運行正常，在Android沒法運行。因‘-webkit-’前綴未正確書寫致使

　  A：-webkit-前綴沒有寫規範。如下是完整的css3動畫代碼（無限360°旋轉）。'animation','@keyframes','transform' 須要在這三個地方都加上‘-webkit-’前綴，因此請檢查下是否正確書寫了前綴。

 

 1 img {
 2     animation: payLoad .5s linear infinite;
 3     -webkit-animation: payLoad .5s linear infinite
 4 }
 5 @keyframes payLoad {
 6     from {
 7         transform: rotate(0deg)
 8     }
 9     to {
10         transform: rotate(360deg)
11     }
12 }
13 @-webkit-keyframes payLoad {
14     from {
15         -webkit-transform: rotate(0deg)
16     }
17     to {
18         -webkit-transform: rotate(360deg)
19     }
20 }

 

點擊事件

一、Q：touchend事件在Ios正常觸發，在Android沒法觸發。因touchmove事件致使，聽說是Android瀏覽器的BUG，請另行查詢。

　  A：請添加touchmove事件，執行‘e.preventDefault();’命令，這樣就能夠正常觸發‘touchend’事件，可是單純這麼添加會致使全部的默認touchmove被禁止，因此請在命令前添加條件‘if else’，（具體條件根據項目需求添加）

1 document.body.addEventListener('touchmove',function(e){
2    if(x>y){
3         e.preventDefault();
4     } 
5 })

 

JavaScript

一、Q：js沒法運行，使用了‘let’ ‘()=>{}’等es6新特性，沒法兼容瀏覽器。

　  A: 一、使用es5寫法；二、使用babel等工具編譯es6代碼。