移动端兼容问题
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);
}
}