zoukankan      html  css  js  c++  java
  • 移动端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 })

    JavaScript

    1、Q:js无法运行,使用了‘let’ ‘()=>{}’等es6新特性,无法兼容浏览器。

       A: 1、使用es5写法;2、使用babel等工具编译es6代码。

  • 相关阅读:
    ActiveMQ 5.x 消息队列
    Spring Boot 整合 ElasticSearch 框架
    Spring Boot 整合 Logback 日志框架
    Spring Boot 整合定时任务和异步任务处理
    Spring 中使用 Java 5.0 Executor
    二级指针三种内存模型综合训练
    08-图8 How Long Does It Take (25 分)
    08-图9 关键活动 (30 分)
    08-图7 公路村村通 (30 分)
    C函数之index、strtoul
  • 原文地址:https://www.cnblogs.com/ygjoe/p/6711465.html
Copyright © 2011-2022 走看看