天天看點

手機浏覽器 css3,css3在不同型号手機浏覽器上的相容一覽表

網上搜集了css3對不同系統手機浏覽器的支援情況(ios/android/winphone)備份一下以便檢視.  以下資料由微信産品部"白樹"整理, 轉載請注明.

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

手機浏覽器 css3,css3在不同型号手機浏覽器上的相容一覽表

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相容,針對高端系統,可以采用更豐富更炫酷的效果。

移動裝置更新換代的很快,目前各種手機的最新版本系統已經支援css3的大部分效果,相信在未來對css3的支援可以達成統一。