移动端兼容性问题汇总

1.iOS手机input框无法输入问题？

*:not(input,textarea) {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
}
input{
  -webkit-user-select: text !important;
}

2.iOS手机使用fixed定位时，滑动滚动条时顶部定位的框会出现跟随滚动，之后又回到原位的情况？

　　头部使用fixed定位，其余部分使用absolute定位

3.iOS手机背景图片使用margin定位，会出现一层灰色的层？

　　使用fixed定位解决

4.iOS手机底部弹出留白问题？

<input placeholder="验证码" type="tel" v-model="verify" maxlength="4" @input="change()" @focus="focusIn" @blur="blurIn" />

blurIn() {
   // ios键盘弹出底部留白问题
   window.scroll(0, 0)
},

 5.webpack打包之后css样式被打包文件舍弃解决方案

/*! autoprefixer: off */
    -webkit-box-orient: vertical;
 /* autoprefixer: on */

 6.ios中使用vue-quill-editor富文本编辑器出现点击其他按钮弹出键盘 然后键盘又关闭现象

　　导致ios出现这个现象的原因1.富文本编辑器内部使用的属性是contenteditable=‘true’实现可编辑 2.在ios中使用了  -webkit-user-select: text 使得IOS能输入

　　两个一起使用的时候会出现 使用了富文本编辑器的地方会出现弹出键盘 然后键盘又自动收回去的现象，解决思路是 禁用掉上面两个条件的其中一个，不需要编辑富文本的时候contenteditable=‘false’，

　　需要编辑富文本的情况 首先对富文本编辑器不使用 -webkit-user-select: text这个属性 然后监听ios键盘弹出事件

 　　document.body.addEventListener('focusin', () =>{ 
        　//软键盘弹起事件 
          //console.log("键盘弹起");
          this.quillEditorIosStyle = true;
      })

　　键盘弹出为富文本编辑器添加 -webkit-user-select: text这个属性 使得可以输入；键盘收起时去掉 -webkit-user-select: text这个属性 

　　这个兼容性问题 找原因及最后解决使用了2天时间(；′⌒`)