移动端兼容问题

1.样式设置overflow:scroll/auto  ios滑动会卡顿

-webkit-overflow-scrolling:touch

2.安卓 placeholder文字设置行时文字会偏上

input 有placeholder属性的时候不要设置行高

3.移动端字体小于12像素时异常显示

先整体放大一倍，再用transform进行缩小

4.ios下input按钮设置了disabled属性为true显示异常

input[type=button]{

　　opacity:1
}

5.安卓手机取消语音输入按钮

input::-webkit-input-speech-button {

display:none

}

6.ios下取消input输入框再输入英文默认大写

<input autocapitalize="off" autocorrect="off" />

7.禁用ios和安卓用户选中文字

添加全局css样式 -webkit-user-select:none

8.禁用ios弹出各种窗口

-webkit-touch-callout:none

9.禁止ios识别长串数字为电话

添加meta属性<meta content="telephone=no" name="format-detection" />

 

@supports (bottom: env(safe-area-inset-bottom)) {

#app {

　　padding-bottom:constant(safe-area-inset-bottom);

　　padding-bottom:env(safe-area-inset-bottom);

}

}