解决移动端兼容问题

解决移动端兼容问题：

1、在ios手机上使用 <input type='button'> 属性的disabled 设置为true，会出现文字和背景异常问题；

解决方法：使用opacity = 1 ，可以解决这个问题

2、 input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出现在中间位置

解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题

3、 在移动端图片上传图片兼容低端机的问题

解决方案:input 加入属性 accept=“image/*” multiple

4、overflow:scroll，或者auto在iOS上滑动卡顿的问题

解决方案:加入-webkit-overflow-scrolling:touch;

5、键盘问题：【默认是需要用户点击输入框才能呼起】；

搜索框举例

• 点击搜索框，键盘弹出来；这个获取input输入框焦点就可以实现 （安卓手机没有问题；ios手机上没有效果）

    this.$refs.input.focus() // 在一个demo上安卓 和 ios都有效，但是正式项目中，ios中无效

• 键盘隐藏：通过给input标签，设置 readonly 属性就可以使键盘收起来了。（安卓上没有问题，ios上无效）

   <input type="text" ref="input" :readonly="readonly">

安卓个ios都有效果的方法是：

    this.$refs.input.blur()

6、 有一些手机上下滚动的卡顿问题？

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

７．有一些情况下对非可点击元素如(label,span）监听点击事件，不会在IOS下触发；

解决方案:css增加cursor:pointer就搞定了