网站建设捌金手指花总十,沥林网站建设马甲比较好,东莞网站开发哪家强,营销型企业网站的建设方案一、背景
在开发微信小程序时#xff0c;不同的手机型号会出现兼容问题#xff0c;特此记录一下
二、安卓/IOS兼容问题总结
2.1、new Date()时间转换格式时#xff0c;IOS不兼容
问题#xff1a;在安卓中时间格式2024-1-31 10:10:10#xff0c;但是在iOS中是不支持 不同的手机型号会出现兼容问题特此记录一下
二、安卓/IOS兼容问题总结
2.1、new Date()时间转换格式时IOS不兼容
问题在安卓中时间格式2024-1-31 10:10:10但是在iOS中是不支持 - 作为日期分隔符
原因IOS系统及 Safari 不支持YYYY-DD-MM时间格式
解决将日期中的-替换为/ let time new Date(2022-12-13 19:00.replace(/-/g,/))
2.2、图片格式展示问题
问题.webp 格式图片在 ios 设备上无法正常显示
原因IOS系统的原生浏览器Safari不支持.webp格式
解决将 webp 的后缀名替换为 jpg或png 的后缀名
img.replace(/\.webp/,.jpg)
2.3、IOS机型margin属性无效
问题底部footer设置margin属性时IOS无效
原因iOS8后UiView有个属性 var layoutMargins:UIEdgeinsets,如果一个View是ViewController的rootview系统会自动设置和管理margins top和bottom margins被设置为0ptleft和right的值根据当前的 size class 不同而不同可能取值为16或者20pt(iPhone6 plus, iPad)你不能修改这些值
解决底部footer加个空盒子div给height值
2.4、IOS安全区域适配
问题在IOS设备上可以看到物理Home键被取消改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况
解决两种方法
方法一使用微信官方APIwx.getSystemInfo()中的safeArea对象进行适配
# wx.getSystemInfo 对比screenHeight和safeArea.bottom
如果是需要适配的机型使用safeArea中的bottom得到安全区域底部纵坐标然后使用screenHeight减去bottom就能得到小黑条的高度。保存到localstorage里面全局都可以使用。
方法二使用苹果官方推出的css函数env()、constant()适配
# 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这个值。
在做屏幕适配时可以这么写
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS11.2*/
2.5、input输入框在ios中光标及字体不居中
问题input输入框在ios中光标及字体不居中
原因iOS 的自动校验功能会对输入内容进行格式化导致文本显示位置发生偏移。
解决两种方法
方法一禁用自动校验功能将 input 的 type 属性设置为 text 可以禁用 iOS 的自动校验功能从而解决光标和文本不居中的问题。
方法二使用 CSS 样式通过设置 input 的 padding 和 font-size 属性可以让输入框中的文本垂直居中和水平居中。
input {padding: 10px 0; /* 垂直居中 */font-size: 16px; /* 字体大小 */
}
2.6、iOS使用overflowauto滚动会卡顿
解决-webkit-overflow-scrolling: touch 最后
