input输入后页面顶上去了 ios_移动端开发时常见的ios和安卓的兼容性问题

1.input聚焦，ios出现outline或阴影，安卓显示正常

解决方法：

input:focus{outline:none}

input:{-webkit-appearance: none;}

2. ios会将数字当成电话号码，导致变色

解决方法：

<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">

3.禁止安卓识别e-mail

解决方法:

<meta content="email=no" name="format-detection" />

4.input的placeholder属性会使文本位置偏上

解决方法：

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

5.低版本ios出现页面底部白边问题

解决问题：

因为ios的上拉回弹造成不好选择的用户体验，直接禁止系统默认的滑动事件

document.body.addEventListener('touchmove', function(event) {

event.preventDefault()

},{ passive : false })

6.屏幕滚动ios端有卡顿现象，安卓正常

解决方法：

• { -webkit-overflow-scrolling: touch; }

-webkit-overflow-scrolling属性控制元素在移动设备上是否使用滚动回弹效果.

auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。

touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。