关于css3在手机端各个浏览器的兼容

Posted 2021-04-09 晓微的前端心得

    现在越来越多的公司进军web App，那么兼容问题是必不可少的。

    话不多说先上图，以下 √：完全支持   √：部分支持   ×：不支持 ，标注(-webkit)：添加-webkit前缀才支持，标注(-ms)：添加 -ms前缀才支持

      这个图在13年8月由-白树-出来了，所以很多属性的兼容到现在可能已经不用做了，具体还要自己去实践。

css3总结:

对于webkit内核的浏览器, 除media、text-shadow外，使用其它属性基本上要加上webkit前缀. 

gradient在低版本的系统中渲染效果不丰富

ios3.2~4.3不支持position:fixed，不推荐使用

android2.1~2.3对动画的支持效果不丰富

android2.1~2.3不支持translate3d，可以利用它结合media写低端android版本的css hack

对于winphone的IE浏览器

IE9~11支持media、box-shadow、border-radius

IE9对动画不支持

IE9不支持box布局

IE9不支持渐变，看具体情况可适当使用IE滤镜

仅支持IE9的写法：{属性：属性值9;}

上述可知，在Webapp开发中，我们可以把移动设备分为低端系统(IE9、android2.1~3.0、ios3.2)和高端系统(ios4+、android4.1~4.2)，针对低端系统，采用普通方案，并使用hack兼容，针对高端系统，可以采用更丰富更炫酷的效果。

      因为手机端基本上浏览器更新很快，所以在以后需要兼容的情况会越来越少。