zoukankan      html  css  js  c++  java
  • IOS10.3.3移动端H5的JavaScript和css3兼容性问题解决

    业务背景:公司需要在内网做一个H5的活动页,然后这个任务分配到我这。

    业务场景:内网App下webview,需要兼容各种手机,安卓和Ipad和Ios,高版本和低版本。

    整体过程实现并不难,难得是怎么去兼容。这个也是解决了兼容性问题之后总结的。

    开发过程虽然遇到一些棘手的问题但都被App那边解决了。之后测试过后,按照计划时间上线,上线过程遇到了预料之后的兼容性问题。当然正因为意外也学了一些知识点。

    主要是10.3.3和9.3.的Ios兼容性问题。

    JavaScript兼容性问题,因为采用的是vue框架,且使用的是vue-cli3脚手架。然后在解决过程中发现转译过后的js代码还存在es5的箭头函数和const。然后ios10.3就挂了。

    然后我修改了babel.config.js文件,针对浏览器列表做的修改,修改如下

    'targets': {
            'browsers': ['> 1%', 'last 5 versions', 'Android >= 4.0', 'not ie <= 8']
          }

    这样在编辑发现就没有const和箭头函数。

    然后是css3的兼容性问题,在我的代码中有这样一句话:

    this.markbc.style = `-webkit-transform: translate3d(0px, -${this.moveLocation}px, 0px);transform: translate3d(0px, -${this.moveLocation}px, 0px);`

    修改为

    this.markbc.style.cssText = `-webkit-transform: translate3d(0px, -${this.moveLocation}px, 0px);transform: translate3d(0px, -${this.moveLocation}px, 0px);`

    搞定。

    这个项目,让我真正认识到babel-loader的浏览器构建列表的实际意义。而css3的解决应该只是个例,毕竟动画是可以不用的。

  • 相关阅读:
    [转自老马的文章]用MODI OCR 21种语言
    [转老马的文章]MODI中的OCR模块
    贴片晶振的脚位方向如何区分
    晶振简介及如何使用示波器测试晶振
    Lintcode 150.买卖股票的最佳时机 II
    Lintcode 82.落单的数
    Lintcode 97.二叉树的最大深度
    Lintcode 9.Fizz Buzz 问题
    LeetCode之461. Hamming Distance
    NYOJ之题目325 zb的生日
  • 原文地址:https://www.cnblogs.com/zhensg123/p/12165571.html
Copyright © 2011-2022 走看看