h5 页面适配iphone6等手机

景凌凯 2019-07-03

javascript 浏览器 测试 H5 兼容

出现问题

项目中,有些需要给移动端做的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转译之后,所有机型完美渲染。

登录 后评论
下一篇
corcosa
9329人浏览
2019-10-08
相关推荐
vuejs开发H5页面总结
274人浏览
2018-01-04 20:24:32
移动端的rem单位
1476人浏览
2015-12-12 10:06:00
H5页面测试总结
1815人浏览
2017-07-03 15:05:00
QQ天气H5-前端完整解析
2490人浏览
2018-07-16 11:33:59
WePY-小程序框架设计
2218人浏览
2018-09-11 11:07:40
0
0
0
327