首页 > 代码库 > 移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~
移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~
前言:在移动端WEBAPP开发中会遇到各种各样的问题,通过此文对遇到的问题做一个归纳总结,方便自己日后查询,也给各位前端开发友人做一个参考。
此文中涉及的问题是本人开发中遇到的,解决方案是本人思考和查询资料的结果,纯属于个人的见解,一个需求,纵有千百种实现方式,所以如有歧义,请温柔吐槽!
此文会持续更新,前期内容会比较杂乱,待Q&A积累到一定量后,会进行整理。
css3
1、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 }
点击事件
1、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 })
移动端WEBAPP开发遇到的坑,以及填坑方案!持续更新~~~~
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。