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的解決應該只是個例，畢竟動畫是可以不用的。