2個月前，我在博文《webapp開發中兼容Android4.0以下版本的css hack》中寫過“那對於做移動網頁開發的同事來說，一般只要做好webkit內核瀏覽器的展現效果就行了” ，在這里糾正下，在目前Wepapp開發中，主要對webkit內核的手機做好各個版本的兼容已經不夠了，像其它的高端智能手機，在市場有一定的占有率也是我們需要列入考慮的范圍。
那么，除了ios和android系統之外，還有哪個移動設備的操作系統是我們需要考慮進來的呢？可能大家會在猜是winphone，沒錯！就是微軟發布的一款手機操作系統Windows Phone，雖然用戶不算太多，但是這部分用戶也是我們需要考慮到的，至少要保證網頁在winphone的展現是正常的。目前winphone有幾個版本，主要是Windows Phone 7 和Windows Phone 8，其對應的瀏覽器分別是IE9和IE10。那么，webapp開發中除了兼容ios3.0~7.0，android2.1~4.2，還要兼容的是IE9~11。
近期在研究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開發的兼容處理，可以參考如下的文章：
【原】webapp開發中兼容Android4.0以下版本的css hack
【原】使用iScroll.js解決ios4下不支持position:fixed的問題