移动端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代码。