移动端兼容性问题

1、1px像素边框问题(利用伪元素模拟一个1px边框，再缩放为原来的0.5)

<div class="box"></div>

.box {

   position: realative

}

,box::after {

content: '",

height: 1px,

width: 100%,

position: absolute,

left: 0,

bottom: 0,

transform: scaleY(0.5),

transform-origin: top

}

 

2、overflow: scroll/auto再ios上滑动卡顿问题

-webkit-overflow-scrolling: touch

 

3、移动端12px字体大小显示异常

先整体方法一倍再用transform中的scale进行缩小

 

4、ios上识别长串数字为电话

meta标签上写入content="telephone=no"

 

5、禁用ios、安卓用户选中文字   -webkit-user-select: none

6、ios中在input输入英文时首字母默认会大写 <input autocorrect="off"  autocapitalize="off">

7、在ios中给input框设置disabled: true禁用时出现异常： 选中input设置opcity: 1

8、安卓机上给placeholder设置行高时文字会偏上，不要在安卓机上给placeholder文字设置行高