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

目录
相关文章
|
3月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
3月前
|
移动开发 JavaScript
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
144 0
|
1月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
1月前
|
SQL NoSQL 关系型数据库
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
若依修改02,若以提供了多种版本,RuoYi-Cloud和SpringBoot+Vue都是PC端的,如果想要适配手机端,用Uniapp+vue,导入Mysql和启动Redis
|
1月前
|
人工智能 自然语言处理 Android开发
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
无法拒绝!GPT-4o 完美适配az手机,畅享丝滑体验
16 0
|
1月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
1月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
122 0
|
1月前
|
前端开发 Windows
手机真机调试本地前端页面
手机真机调试本地前端页面
33 0
|
2月前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
18 0
|
3月前
|
开发工具 iOS开发
如何导出iPhone手机中app共享文件夹的文件与闪退日志的收集
如何导出iPhone手机中app共享文件夹的文件与闪退日志的收集
48 1