話說現在的手機型號越來越多，主要還是android和ios這2個巨頭稱霸了江湖，而他們自帶的瀏覽器內核是webkit，那對於做移動網頁開發的同事來說，一般只要做好webkit內核瀏覽器的展現效果就行了，看起來很簡單，其實背后還有一個大坑等着你。
雖說是webkit內核，但頁面的展現效果還會受到自身系統的影響，升級后的系統打了補丁，新增了新的屬性，支持更多豐富炫麗的效果，那么舊的系統(未升級的)就不支持一些新的屬性，開發哥哥就是沒有做好低端版本兼容的話，就會產生所謂的bug的，再加上android和ios系統各個版本也會帶私有屬性或者少帶某個屬性，於是坑爹的東西就這樣產生，各種奇葩的bug，仿佛又回到IE時代，還是上次在文章(使用iScroll.js解決ios4下不支持position:fixed的問題)中的那句話：回到頭來我們還是乖乖去做好兼容，要么就找到完美的解決方案，誰讓可愛的用戶和親愛的老板是上帝呢，於是，我們淪落為苦逼的攻城獅~
幾個月前寫過一篇文章：[webkit移動開發筆記]之如何去除android上a標簽產生的邊框，在android2+的版本中，按鈕邊框會產生bug，需要清除掉，解決方案如下：
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除android a/button/input標簽被點擊時產生的邊框 2.去除ios a標簽被點擊時產生的半透明灰色背景 */
大家在注釋中可以看到，ios被點擊時產生的半透明灰色背景會被這個屬性也清除掉，沒有了效果，用戶體驗一般，這個時候我們要保留android4+的邊框和ios系統的半透明灰色背景顯示正常，那么我們標題中的問題來啦，如何讓頁面只兼容android4.0以下版本的系統，無需JS也可以做到，有木有！！！
在CSS3的兼容中，相信大家對使用media的兼容並不陌生，我之前也提到過很多次，那么今天使用的hack也是跟它離不開的，代碼如下：
@media all and (-webkit-transform-3d){/* Android4.0下不識別該-webkit-transform-3d，使用它可做Android4.0下版本兼容 */ .css{...} }
這里利用-webkit-transform-3d屬性，因為Android4.0下不識別該選擇器，瀏覽器解析代碼時，會直接跳過此步驟，那么我們簡單寫下代碼，就是做好對Android4.0以下版本的兼容啦！
測試例子：http://jsbin.com/aziyor/1
測試代碼：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>webapp開發中兼容Android4.0下版本的css hack</title> <style type="text/css"> body{color:red} @media all and (-webkit-transform-3d){ .green{color:green} } </style> </head> <body> <h1 class="green">android4.0+和ios瀏覽器中，我是綠色的；android4.0以下瀏覽器中，你會看到我是紅色的</h1> </body> </html>
android4.0+和ios瀏覽器中效果圖：
android4.0以下瀏覽器中效果圖：
ok，本篇文章結束，感謝公司某同事提供的兼容辦法，寫出來共享，希望好的東西能夠幫助到更多的朋友，解決大家的困擾~