2個月前，我在博文《webapp開發中相容Android4.0以下版本的css hack》中寫過“那對於做移動網頁開發的同事來說，一般只要做好webkit核心瀏覽器的展現效果就行了” ，在這裡糾正下，在目前Wepapp開發中，主要對webkit核心的手機做好各個版本的相容已經不夠了，像其它的高階智慧手機，在市場有一定的佔有率也是我們需要列入考慮的範圍。

那麼，除了ios和android系統之外，還有哪個移動裝置的作業系統是我們需要考慮進來的呢？可能大家會在猜是winphone，沒錯！就是微軟釋出的一款手機作業系統Windows Phone，雖然使用者不算太多，但是這部分使用者也是我們需要考慮到的，至少要保證網頁在winphone的展現是正常的。目前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開發的相容處理，可以參考如下的文章：