【原】webapp開發中相容Android4.0以下版本的css hack
話說現在的手機型號越來越多，主要還是android和ios這2個巨頭稱霸了江湖，而他們自帶的瀏覽器核心是webkit，那對於做移動網頁開發的同事來說，一般只要做好webkit核心瀏覽器的展現效果就行了，看起來很簡單，其實背後還有一個大坑等著你。
雖說是webkit核心，但頁面的展現效果還會受到自身系統的影響，升級後的系統打了補丁，新增了新的屬性，支援更多豐富炫麗的效果，那麼舊的系統(未升級的)就不支援一些新的屬性，開發哥哥就是沒有做好低端版本相容的話，就會產生所謂的bug的，再加上android和ios系統各個版本也會帶私有屬性或者少帶某個屬性，於是坑爹的東西就這樣產生，各種奇葩的bug，彷彿又回到IE時代，還是上次在文章(
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以下版本的相容啦！
測試程式碼：
<!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，本篇文章結束，感謝公司某同事提供的相容辦法，寫出來共享，希望好的東西能夠幫助到更多的朋友，解決大家的困擾~
相關推薦
【原】webapp開發中相容Android4.0以下版本的css hack
話說現在的手機型號越來越多，主要還是android和ios這2個巨頭稱霸了江湖，而他們自帶的瀏覽器核心是webkit，那對於做移動網頁開發的同事來說，一般只要做好webkit核心瀏覽器的展現效果就行了，看起來很簡單，其實背後還有一個大坑等著你。 雖說是webkit核心，但頁面的展現效果還會受到自身系統的影響
【VS】VS開發中遇到的問題的總結
包含 erro 問題 dir pre x64 blank 解決 直接 1. VS中經常會出現無法解析的外部符號，還有LINK ERROR 2019等 這類問題如果檢查代碼沒有錯誤，很大概率就是lib文件錯誤。調試程序找出問題函數，再找出問題函數使用到的lib文件，在項
【Web】Web開發中的異常處理方案
我認為最合理的做法： 1、dao層不捕獲異常、不丟擲異常：spring框架將底層的資料庫checked異常封裝成unchecked異常了 2、service層捕獲異常，並丟擲自定義unchecked異常，異常中不定義狀態碼：checked異常預設情況事務不會回滾 3、controller層捕獲異常，並丟擲自定
【筆記】Android開發中從EditText中獲取數字
xml檔案中 <EditText android:id="@+id/editText_age" android:layout_width="match_p
【原】迎接微信winphone 5.0 版本的IE10樣式相容
微信 Android 5.1 和 iPhone 5.1 已正式釋出了，據說本12月底，微信將推出 Winphone 5.0版本，全面支援微信支付，它繫結 IE10 瀏覽器，那麼做微信公眾號的 H5 頁面，除了做好 webkit 相容外，IE10 的相容也是必不可少的。 曾經寫過《常見CSS3屬性對ios
【Android】ListView開發中Adapter使用Activity中的方法
最近在做一個專案，本來只做一塊，後來需求有所變化，變成不確定欄數了，有時一塊，有時兩塊，或者更多，我就想引入ExpandableListView（以下簡稱listview），引入這個控制元件對我也是個
【Django】Django開發中的日誌輸出
開發環境：Ubuntu16.04+Django 1.11.9+Python2.7 一:使用自定義函式輸出日誌到log檔案: import time def print_log(log): file_obj = open('/tmp/f
【原】iOS開發進階(唐巧)讀書筆記(二)
第三部分：iOS開發底層原理 1、Objective-C物件模型 1.1 isa指標 NSObject.h部分程式碼： NS_ROOT_CLASS @interface NSObject <NSObject> { Class isa; } objc.h部分程式碼： typedef stru
cardview 相容 5.0以下版本
android cardview 是5.0之後釋出的控制元件，現在有向下相容包support.v7 。可以在相容性方面還有一些問題。 例如在低於 API 21時 cardview 把elavation部分都算進 width長度，但是高於API 21 時 cardview 不
【EasyUI總結】EasyUI開發中遇到的坑
spa columns .com 字段名 html mil span 個數字 style 普遍：1.easyui在書寫鍵值對的時候要註意是否要加引號，在需要加引號的地方不加則無法渲染；datagrid數據網格：1.datagrid默認請求方式是post，如果要使用分頁功能p
【安全牛學習筆記】Web開發中的涉及到的權限問題
信息安全 web security+ Web開發中的涉及到的權限問題1.常見的觸發場景2.漏洞原理3.漏洞危害4.如何避免&修復漏洞-------------------------------------------------------------------------------
【webpack外掛使用】在開發中快速掌握並使用Webpack構建web應用程式
1.webpack-dev-server外掛的基本使用 入門程式 const path = require('path'); // 匯出一個Webpack的配置物件（通過node中的模組操作，向外暴露了一個配置物件） module.exports = { // 需要在這裡手動指定入口
【隨堂筆記】unity開發中Socket的用法（一，實現伺服器與客戶端簡單的連結）
實現了簡單的連結，也增加了客戶端沒有連結到伺服器的自動重連 伺服器程式碼 using System; using System.Net; using System.Net.Sockets; namespace SeverSocket { class Program
【讀書筆記】Web開發中的跨域
文章：為什麼給你設定重重障礙？講一講Web開發中的跨域 總結： 一、什麼是跨域？ 二、為什麼不讓跨域？ 因為在web互動的環境中，只能保證請求發自某個使用者的瀏覽器，卻不能保證請求本身是使用者自願發出的， 這就是跨站請求偽造（CSR
【原】資料視覺化之Matplotlib : pandas中的繪圖函式
Pandas有許多能夠利用DataFrame物件資料組織特點來建立標準圖表的高階繪圖方法，本文主要介紹的是pandas中的繪圖函式。 #coding:utf-8 import matplotlib.pyplot as plt import pandas as pd import numpy as np fr
【乾貨】iOS開發學習中不易弄清楚的六種開發模式
在我們的實際開發中，架構模式多多少少也有幾十種，在很多模式裡，相信很多剛開始接觸ios的程式設計師會遇到這類問題，本文小編就為大家詳細解說這6種模式應用場景，幫助大家理清思路，學好ios開發。 一，代理模式應用場景 當一個類的某些功能需要由別的類來實現，但是又不確定具體會
【解決】SELECT標籤中OPTION的顯隱控制(相容IE)
轉載地址：https://blog.csdn.net/sanyuedexuanlv/article/details/26455925 ，感謝大大！ 問題描述： 在有些功能切換的時候，select標籤中的某些option是要被隱藏的。但通過設定optio
【Linux】Linux開發過程中的一些常用配置
一、本地機登入伺服器設定ssh免密 1、設定host vim .ssh/config # 設定host登入名 Host 110 HostName 10.103.xx.110 User ******* ProxyCommand ssh -W %h:%p swa
【原】SVN中如何給專案打基線
打基線就是給被打基線的東西加一個標識，然後在這些東西已經有了變化形成了新的版本後，還能看到打基線的時候這些東西的原來的樣子，從而可以對其進行追蹤和版本隔離。 在專案管理中，打基線主要是在專案進入另一個階段時把上一階段的東西打個標識，從而也作為下一階段的開始。
【matlab】從圖片中擷取矩形區域（手工選取/標記在原圖上/擷取矩形區域並儲存）
%第一步：從圖片中選取矩形框區域 I = imread('o.png'); [A,rect] = imcrop(I); imshow(A); rect %第二步：根據rect確定：在原圖中繪製的矩形的座標，注意rect的格式[m n l k]->[(m,n) (m+l