h5 页面适配iphone6等手机

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

目录
相关文章
|
2月前
|
移动开发 JavaScript
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
56 0
|
6月前
|
移动开发 小程序 Android开发
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
109 0
|
7月前
|
开发工具 数据安全/隐私保护 Android开发
ipa文件怎么安装到iPhone手机上?
ipa文件怎么安装到iPhone手机上?
|
8月前
|
小程序
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
2月前
|
开发工具 数据安全/隐私保护 Android开发
ipa文件怎么安装到iPhone手机上?
ipa文件怎么安装到iPhone手机上?
|
7月前
|
网络安全 开发工具 数据安全/隐私保护
如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总
如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总
|
7月前
|
存储 缓存 安全
Android14 适配之——现有 App 安装到 Android14 手机上需要注意些什么?
Android14 适配之——现有 App 安装到 Android14 手机上需要注意些什么?
286 0
|
3月前
|
网络安全 开发工具 数据安全/隐私保护
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
|
3月前
|
开发工具 数据安全/隐私保护 Android开发
ipa 文件怎么安装到 iPhone 手机上?
ipa 文件怎么安装到 iPhone 手机上?
|
6月前
|
移动开发 小程序 Android开发