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

目录

1、iOS端列表页面屏幕滑动滞涩感强烈

2、iOS端的按钮以及添加的边框和倒角属性失效问题

[3、iOS错误识别页面时间为 a 标签](#3、iOS错误识别页面时间为 a 标签)

4、iOS端调起软键盘界面布局走位问题

5、iOS端滚动条部分滚动样式不生效问题


背景 :

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

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


1、iOS端列表页面屏幕滑动滞涩感强烈

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

解决方案 :添加一个 css 属性( -webkit-overflow-scrolling

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

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


2、iOS端的按钮以及添加的边框和倒角属性失效问题

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

border: 1px solid gray;

border-radius: 10px; ( 在 iOS 端展示不出来 )

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

解决方案 :添加一个 css 属性( will-change

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

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

transform: matrix3d(0, 0, 0);


3、iOS错误识别页面时间为 a 标签

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

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

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

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

4、iOS端调起软键盘界面布局走位问题

详情请见 :

项目难点:解决IOS调起软键盘之后页面样式布局错乱问题_h5 ios键盘弹出 布局上移


5、iOS端滚动条部分滚动样式不生效问题

详情请见 :

记录解决IOS滚动跳转不生效问题_苹果scrollto方法不生效


6、


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

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek