记录移动端项目iOS端相对于安卓的各种兼容性问题

雨季mo浅忆

于 2024-06-05 00:00:00 发布

阅读量657

点赞数 22

分类专栏：前端文章标签： ios 前端

本文链接：https://blog.csdn.net/weixin_58099903/article/details/139429748

版权

158 篇文章 29 订阅

订阅专栏

背景：

在开发移动端H5项目的过程中，遇到了各种“ 匪夷所思 ”的奇葩兼容性问题（大致就是在安卓手机上面显示好好的、在浏览器模拟器上面看也是没有任何问题的，，但就是在iOS上面看样式啥的就各种状态百出，呈现不出想要的样子来。。。）

So，特此记录一下遇到的问题，加深印象，也方便后续少踩坑。

就是在安卓手机上面滑动屏幕，会一直滑动然后慢慢停止滚动，但是在iOS端滑动屏幕，手指离开屏幕，它就会停止滚动了，就是滑一下滚动一下，显得很卡顿、滞涩的感觉。

解决方案：添加一个 css 属性（ -webkit-overflow-scrolling ）

.list {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;// 添加此属性以解决滑动滞涩问题
}

注意：此样式可能会影响你页面使用的 “ position 定位功能 ”，尤其是 position: fixed; 固定定位。

在 iOS 端设置了 border-radius 属性的元素展示会有问题

border: 1px solid gray;

border-radius: 10px; （在 iOS 端展示不出来）

想当初最开始没有找到解决方案时，直接把项目里所有带有 border-radius 属性的都注释了。（治标不治本）

解决方案 ：添加一个 css 属性（ will-change ）

.van-button--round {
  border: 1px solid gray;
  border-radius: 10px;
  will-change: transform;// 添加此属性以解决边框不展示问题
}

如若是加了 will-change: transform; 还不生效的话，再加一行样式代码：

transform: matrix3d(0, 0, 0);

页面展示内容为： 2024-06-01 12:00 ～ 2024-06-05 12:00

iOS会自动将 2024-06-05 错误识别成为一个可点击跳转到发送信息界面的 a 标签。

解决方案：取消 a 标签的可点击效果，调整其标签颜色样式

a {
  // 取消a标签点击效果并更改其样式
  text-decoration: none;
  pointer-events: none;
  color: #474747;
}

详情请见：

详情请见：

6、

持续记录更新、收藏不迷路哦～

关注