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

前言：在移動端WEBAPP開發中會遇到各種各樣的問題，通過此文對遇到的問題做一個歸納總結，方便自己日后查詢，也給各位前端開發友人做一個參考。

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

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

 

css3

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

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

 

img {
    animation: payLoad .5s linear infinite;
    -webkit-animation: payLoad .5s linear infinite
}
@keyframes payLoad {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(360deg)
    }
}
@-webkit-keyframes payLoad {
    from {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg)
    }
}

 

點擊事件

1、Q：touchend事件在Ios正常觸發，在Android無法觸發。因touchmove事件導致，據說是Android瀏覽器的BUG，請另行查詢。

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

document.body.addEventListener('touchmove',function(e){
   if(x>y){
        e.preventDefault();
    } 
})

 

JavaScript

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

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