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转译之后,所有机型完美渲染。

上一篇:数组字符串常用方法


下一篇:【值得收藏的帝国cms技巧】帝国cms常用标签总结