每次做移动端项目，到了提测阶段最让我忐忑的还是测试的各种版本的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、手机浏览器等高级浏览器直接添加
-
oninput="this.value=this.value.replace(/\D/g,'')"
-
低版本IE等添加：
-
onkeyup="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，一般情况下跟相对定位相互配合一波操作都能解决固定定位的问题
-