【原】常見CSS3屬性對ios&android&winphone的支援

近期在研究css3的性能，順手也整理了常見css3屬性對ios&android&winphone支援，今天分享給大家，如下：

√：完全支援   √：部分支援   ×：不支援   (-webkit)：添加-webkit字首才支援   (-ms)：添加 -ms字首才支援

總結

對于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\0;}

上述可知，在webapp開發中，我們可以把移動裝置分為低端系統(ie9、android2.1~3.0、ios3.2)和高端系統(ios4+、android4.1~4.2)，針對低端系統，采用普通方案，并使用hack相容，針對高端系統，可以采用更豐富更炫酷的效果。移動裝置更新換代的很快，目前各種手機的最新版本系統已經支援css3的大部分效果，相信在未來對css3的支援可以達成統一。

關于webapp開發的相容處理，可以參考如下的文章：

<a href="http://www.cnblogs.com/peunzhang/p/3156540.html" target="_blank">【原】webapp開發中相容android4.0以下版本的css hack</a>

<a href="http://www.cnblogs.com/peunzhang/archive/2013/06/14/3117589.html" target="_blank">【原】使用iscroll.js解決ios4下不支援position:fixed的問題</a>

<a href="http://www.cnblogs.com/peunzhang/archive/2013/03/21/2966905.html" target="_blank">【原】[webkit移動開發筆記]之相容iphone4和iphone5的方法</a>

<a href="http://www.cnblogs.com/peunzhang/archive/2012/04/09/2437563.html" target="_blank">【原】欺騙浏覽器的css（最新相容） 一直更新</a>

作者：白樹