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的解决应该只是个例，毕竟动画是可以不用的。