【原】webapp開發中兼容Android4.0如下版本的css hack

時間 2019-11-25

標籤 webapp 開發兼容 android4.0 android 如下版本 css hack 欄目無線简体版

原文原文鏈接

話說如今的手機型號愈來愈多，主要仍是android和ios這2個巨頭稱霸了江湖，而他們自帶的瀏覽器內核是webkit，那對於作移動網頁開發的同事來講，通常只要作好webkit內核瀏覽器的展示效果就好了，看起來很簡單，其實背後還有一個大坑等着你。css

雖然說是webkit內核，但頁面的展示效果還會受到自身系統的影響，升級後的系統打了補丁，新增了新的屬性，支持更多豐富炫麗的效果，那麼舊的系統(未升級的)就不支持一些新的屬性，開發哥哥就是沒有作好低端版本兼容的話，就會產生所謂的bug的，再加上android和ios系統各個版本也會帶私有屬性或者少帶某個屬性，因而坑爹的東西就這樣產生，各類奇葩的bug，彷彿又回到IE時代，仍是上次在文章(使用iScroll.js解決ios4下不支持position:fixed的問題)中的那句話：回到頭來咱們仍是乖乖去作好兼容，要麼就找到完美的解決方案，誰讓可愛的用戶和親愛的老闆是上帝呢，因而，咱們淪落爲苦逼的攻城獅~html

幾個月前寫過一篇文章：[webkit移動開發筆記]之如何去除android上a標籤產生的邊框，在android2+的版本中，按鈕邊框會產生bug，須要清除掉，解決方案以下：android

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也能夠作到，有木有！！！ios

在CSS3的兼容中，相信你們對使用media的兼容並不陌生，我以前也提到過不少次，那麼今天使用的hack也是跟它離不開的，代碼以下：web

@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/1app

測試代碼：webapp

<!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>