苹果手机各种兼容性问题：滑动，背景图片不显示，input 禁止非数字输入，position定位，隐藏input光标等

本文链接：https://blog.youkuaiyun.com/weixin_41845146/article/details/84794318

本文主要探讨了在移动端开发中遇到的苹果手机兼容性问题，包括滑动失效、页面不能滑动、背景图片不显示、input限制数字输入、position定位异常以及隐藏input光标等，并提供了相应的解决方案。例如，启用`-webkit-overflow-scrolling: touch;`改善滑动体验，使用`<img>`标签替换背景图片，以及通过CSS调整来隐藏光标等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次做移动端项目，到了提测阶段最让我忐忑的还是测试的各种版本的IOS手机，尤其是那只苹果se系统版本贼低的神机。

苹果手机 overflow-y: auto 滑动不了或者滑动卡的问题
-webkit-overflow-scrolling: touch;
这行代码启用了硬件加速特性，所以滑动很流畅。但这属性会相对耗费更多内存

手机端：使页面不能滑动
<body style="position:fixed"></body> 只对苹果手机有效，对安卓手机无效

width: 100%;

height: 100%;

overflow: hidden;

overflow-y: auto;

-webkit-overflow-scrolling: touch;

position: absolute;  // 苹果系统版本为10的还不能滑动的问题，加这行

背景图片不显示问题
苹果se和苹果6s background属性失效，所以把背景图片改成 img 标签显示

input 禁止非数字输入
chrome、firefox、手机浏览器等高级浏览器直接添加
- οninput="this.value=this.value.replace(/\D/g,'')"
- 低版本IE等添加：
- οnkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
第二种方法

Vue.js + vux：



<input type="text" @input="handlePatPhone" placeholder="请输入患者手机号" @focus="inputFocus" v-model="patPhone"/>

handlePatPhone (e) {

    this.patPhone = e.target.value.replace(/\D/g, '')

}



let oldVal = val

let newVal = '' // val.replace(/\D/g, '')

newVal = val.replace(/[^\d.]/g, '')

newVal = newVal.replace(/\.{2,}/g, '.')

newVal = newVal.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')

position 定位都加上left top，不然苹果手机动不动来个幺蛾子，比如苹果手机给我的半月镰刀惊喜：
用div加上定位画的进度图：
隐藏input光标
最终解决方法：width 200% margin-left -100%

width 200%

margin-left -100%

border none

opacity 0

outline: none

color transparent

栗子：密码框，后面其实隐藏了一个input但是在苹果手机会有一个光标在乱蹦，设置了各种隐藏光标的苹果都不起作用，安卓手机正常。

固定定位的各种问题
- 固定定位的元素里有输入框，产生的各种bug
- 当 input 获得焦点后，获取元素将固定定位 position:fixed 改为相对定位 position:absolute，一般情况下跟相对定位相互配合一波操作都能解决固定定位的问题