移动端兼容性问题-css篇

scroll元素滑动，ios滑动比较生涩

 解决办法：给父类设置-webkit-overflow-scrolling:touch

iphone及ipad下输入框默认内阴影

 解决办法：	设置样式 -webkit-appearance:none;

IOS 在点击div的时候会出现黑灰色背景块

-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

ios 长按出现拷贝、复制等菜单选项

-webkit-touch-callout: none;
/*系统默认菜单被禁用*/
 -webkit-user-select: none;
/*webkit浏览器*/
 -khtml-user-select: none;
/*早期浏览器*/
-moz-user-select: none;
/*火狐*/
-ms-user-select: none;
/*IE10*/
user-select: none;

背景图片设置，rentina屏幕下图片模糊

 解决办法：使用2倍图，background-size设为二分之一

ios系统中元素被触摸时产生的半透明灰色遮罩

 解决办法：设置样式 -webkit-tap-highlight-color:rgba(255,255,255,0)

css width\height百分比值

 百分比在低端机型上会有不同的表现，具体情况具体分析。(低版本的oppo和华为手机上面出现过)
 解决办法：建议尽量不使用百分比，可以使用rem去实现。

使用css3控制背景图的切换

 在手机上面效果卡顿，且切换会有问题
 解决办法：使用css合并切换图层，使用css中的帧动画通过控制background-position来显示图片位置，这种写法手机上面兼容性较好

使用animation同时使用transform和rotate:

 在手机上面效果被覆盖并且效果出问题
 解决办法：transform3d增加一个z坐标数值

使用css中的scale影响图片变的模糊不清楚

 原因:scale导致了页面的重排和重绘
 解决办法：给css中加上translageZ(0)

ios机型使用圆角的overflow:hidden,会导致圆角遮罩不生效

解决办法：

overflow: hidden;
border-radius: 30px;
transform: rotate(0deg);

输入框在android版本小于10的手机中会有默认白色背景和边框,导致样式错乱.

background-color: transparent;
FILTER: alpha(opacity=0);//安卓兼容

h5 图片长按保存禁用

慎用，因为设置次属性可能导致页面不能滚动，根据自己实际情况来采取即可

img{
   pointer-events:none;/* 禁止长按图片保存 */
}

最终完美的解决方案可以通过构建工具来帮助我们实现：使用 postcss 插件 autoprefixer 配合 browserslist 增加厂商前缀