微信小程序 安卓/IOS兼容问题

一、背景

在开发微信小程序时,不同的手机型号会出现兼容问题,特此记录一下

二、安卓/IOS兼容问题总结

2.1、new Date()时间转换格式时,IOS不兼容

问题:在安卓中时间格式2024-1-31 10:10:10,但是在iOS中是不支持 "-" 作为日期分隔符

原因:IOS系统及 Safari 不支持YYYY-DD-MM时间格式

解决:将日期中的"-",替换为"/"

javascript 复制代码
 let time = new Date('2022-12-13 19:00'.replace(/-/g,'/'))

2.2、图片格式展示问题

问题:.webp 格式图片在 ios 设备上无法正常显示

原因:IOS系统的原生浏览器Safari不支持.webp格式

解决:将 webp 的后缀名替换为 jpg或png 的后缀名

javascript 复制代码
img.replace(/\.webp/,'.jpg')

2.3、IOS机型margin属性无效

问题:底部footer设置margin属性时,IOS无效

原因:iOS8后,UiView有个属性 var layoutMargins:UIEdgeinsets,如果一个View是ViewController的rootview,系统会自动设置和管理margins , top和bottom margins被设置为0pt,left和right的值根据当前的 size class 不同而不同,可能取值为16或者20pt(iPhone6 plus, iPad),你不能修改这些值

解决:底部footer加个空盒子div,给height值

2.4、IOS安全区域适配

问题:在IOS设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况

解决:两种方法

方法一:使用微信官方API,wx.getSystemInfo()中的safeArea对象进行适配

javascript 复制代码
# wx.getSystemInfo 对比screenHeight和safeArea.bottom

如果是需要适配的机型,使用safeArea中的bottom,得到安全区域底部纵坐标,然后使用screenHeight减去bottom就能得到小黑条的高度。保存到localstorage里面,全局都可以使用。

方法二:使用苹果官方推出的css函数env()、constant()适配

javascript 复制代码
# css函数env()、constant()适配

env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

safe-area-inset-left:安全区域距离左边边界的距离

safe-area-inset-right:安全区域距离右边边界的距离

safe-area-inset-top:安全区域距离顶部边界的距离

safe-area-inset-bottom :安全距离底部边界的距离

因为目标是需要对底部小黑条做适配,所以只需要关注safe-area-inset-bottom这个值。

在做屏幕适配时可以这么写

javascript 复制代码
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

2.5、input输入框在ios中光标及字体不居中

问题:input输入框在ios中光标及字体不居中

原因:iOS 的自动校验功能会对输入内容进行格式化,导致文本显示位置发生偏移。

解决:两种方法

方法一:禁用自动校验功能:将 input 的 type 属性设置为 text 可以禁用 iOS 的自动校验功能,从而解决光标和文本不居中的问题。

方法二:使用 CSS 样式:通过设置 input 的 padding 和 font-size 属性,可以让输入框中的文本垂直居中和水平居中。

javascript 复制代码
input {
  padding: 10px 0; /* 垂直居中 */
  font-size: 16px; /* 字体大小 */
}

2.6、iOS使用overflow:auto;滚动会卡顿

解决:-webkit-overflow-scrolling: touch

**最后,**👏👏 😀😀😀 👍👍

相关推荐
Q_Q5110082852 小时前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐2 小时前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序
LB21122 小时前
苍穹外卖-购物车 前端修改(小程序主页与购物车模块显示不一致)
小程序
peachSoda72 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
ღ᭄ꦿ࿐Never say never꧂4 小时前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
2501_9151063211 小时前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
巨神峰SEO14 小时前
支付宝小程序 SEO 实战:鲜花送达类小程序抢占搜索流量指南
小程序·支付宝小程序排名优化·支付宝小程序seo·支付宝小程序排名·支付宝优化
凉辰15 小时前
微信小程序uni.request 返回值存在精度丢失问题
微信小程序·小程序
李慕婉学姐16 小时前
【开题答辩过程】以《基于微信小程序教学评价平台的设计与实现》为例,不会开题答辩的可以进来看看
微信小程序·小程序
计算机学姐16 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis