h5 页面适配iphone6等手机

出现问题

项目中，有些需要给移动端做的h5页面。开发的时间预览使用的是浏览器自带的移动端模拟功能，各种样式，功能都是没有问题的。开发完成之后，使用自己的手机也阅览过，也是没有任何的问题。但是当交付测试的时间，在iphone6以下的机型中测试的时间出现了样式乱的问题。

思考问题

h5页面使用的是vue单模板，有一个列表在iphone6页面出现的是直接显示了标签，所以考虑到可能是js没有正确的加载和执行

解决问题

首先想到的就是兼容性的问题，iphone6手机可能对一些新的js语法没有支持性。百度也搜了一下，也有人是let在iphone中不支持，换为var就ok了。所以就考虑更换页面中的let。更换let之后，部分页面已经可以正产渲染了。

Babel

有些页面依旧没有正常的渲染。考虑到，在线的js转化工具，类似将es6转为es5的。结果发现了Babel

Babel 是一个 JavaScript 编译器

Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

了解了Babel之后，发现这正是我所需要的。

Babel在线编辑工具

解决问题

使用bable转译之后，所有机型完美渲染。