2025年3月17日 星期一 甲辰(龙)年 月十六 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > 小程序

安卓/ios兼容问题及处理(小程序/H5)

时间:11-10来源:作者:点击数:27

1. 微信小程序中new Date()转换时间时间格式时IOS不兼容的问题

问题:然后利用new Date() 转换时间戳时,使用微信开发工具、安卓都没问题,ios中无法展示并报错 “invalid date”。

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

解决办法: var d = new Date(TokenEndDate.replace(/-/g, “/”)) // 格式化时间

2. IOS机型margin属性无效问题

问题: 底部footer设置margin属性的时候发现真机IOS上无效,在微信开发者工具/安卓手机/谷歌iphone/安卓机型皆正常

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

解决办法: footer底部加空div给height

3. input输入框在ios中光标及字体不居中

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

原因: 使用line-height垂直居中。

解决办法: 给input设置lineline-height来让输入内容居中或者上下偏移是不可取的,推荐使用padding撑开高度

  • input{
  • padding:30rpx;
  • &::placeholder {
  • font-size: 14px;
  • letter-spacing: 0.67px;
  • color: #fff;
  • }
  • }

4. m3u8视频格式,ios不能播放,安卓正常

问题 :video 视频格式m3u8,在ios里边儿不能播放,但是安卓能正常播放

原因:xxx

解决办法: 添加 custom-cache={{cache}} ,data 中添加 cache:false即可

  • <video src="{{sbDress}}" controls custom-cache="{{cache}}"></video>

5. 安卓/IOS图片卡顿异形

问题 :安卓上图片会出现卡顿,变形,然后才会显示正常的图片大小

原因: image组件默认宽度300px、高度225px

解决办法: 使用image 标签,尽量固定宽高。

6. ios 表单元素 input 和textarea 默认有内阴影(H5)

  • input{ -webkit-appearance: none; }

7. 键盘弹出异常

问题: ios上键盘弹出会将页面往上顶 安卓显示正常

原因: ios上的软键盘会使页面的fixed定位失效。

解决办法: 可以监听resize事件(浏览器窗口大小调整时触发),当键盘弹出的时候,更改页面的position属性值。

  • let myFunction
  • let isIos = true
  • if (isIos) { // 既是微信浏览器 又是ios============(因为查到只有在微信环境下,ios手机上才会出现input失去焦点的时候页面被顶起)
  • document.body.addEventListener('focusin', () => { // 软键盘弹起事件
  • clearTimeout(myFunction)
  • })
  • document.body.addEventListener('focusout', () => { // 软键盘关闭事件
  • clearTimeout(myFunction)
  • myFunction = setTimeout(function() {
  • window.scrollTo({top: 0, left: 0, behavior: 'smooth'})// 重点 =======当键盘收起的时候让页面回到原始位置
  • }, 200)
  • })
  • }

​8. 安卓ios滑动 兼容问题

  • -webkit-overflow-scrolling: touch;

9. 安卓ios打开相机选择相册

  • <input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>
  • $(function () {
  • //获取浏览器的userAgent,并转化为小写
  • var ua = navigator.userAgent.toLowerCase();
  • //判断是否是苹果手机,是则是true
  • var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
  • if (isIos) {
  • $("input:file").removeAttr("capture");
  • };
  • })

10. ios安全区域适配

问题: 部分页面内自己手写的底部tabbar会被黑线挡住内容

原因: IPhone安全区域,安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Homendicator)的影响。

解决办法

  • # wx.setStorageSync获取机型
  • # wx.getSystemInfo 对比screenHeight和safeArea.bottom
  • # css函数env()、constant()适配
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐