话说现在的手机型号越来越多，主要还是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，本篇文章结束，感谢公司某同事提供的兼容办法，写出来共享，希望好的东西能够帮助到更多的朋友，解决大家的困扰~

【原】webapp开发中兼容Android4.0以下版本的css hack的更多相关文章

  1. 关于软件开发中兼容win7注册表的解决方案

    关于软件开发中兼容win7注册表的解决方案   编写人:CC阿爸 2014-3-14 l  近来在开发一winform程序时,发现在xp 系统访问注册表一切正常.可偏这个时候,微软又提醒大家.Xp今年 ...

  2. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  3. webapp开发中的一些注意的

    和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(functio ...

  4. webApp开发中的总结

    meta标签:  H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  5. Babel+vscode实现APICloud开发中兼容ES6及以上代码

    本文出自APICloud官方论坛, 感谢论坛版主 penghuoyan 的分享.   使用APICloud开发时,考虑到兼容问题一直使用ES5开发,时间越久感觉越落后,整理了一个兼容ES6的开发环境, ...

  6. 搭建Android开发环境之——Android4.0.3, 4.1, 4.2, 4.3, 4.x，及升级 ADT（22.0.5）和SDK（22.x）

    1.首先要下载相关的软件 1). JDK 6 以上 2). eclipse( Version 3.6.2  or higher ) 点击下载 3). SDK(android-sdk_r18-windo ...

  7. WebApp 开发中常用的代码片段

    其实这里面的多数都是 iOS 上面的代码.其他平台的就没有去验证了. HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=de ...

  8. [iOS开发]Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统

    现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情况下无法调试iOS7,因为缺乏调试iOS7需要的配置文件.同时在低版本的Xcode上面(8以下),也无法调试iOS ...

  9. Android4.0以上版本Http请求的问题

    异常:android.os.NetworkOnMainThreadException Android 4.1项目:使用新浪微博分享时报: android.os.NetworkOnMainThreadE ...

随机推荐

  1. 经典 HTML5 & Javascript 俄罗斯方块游戏

    Blockrain.js 是一个使用 HTML5 & JavaScript 开发的经典俄罗斯方块游戏.只需要复制和粘贴一段代码就可以玩起来了.最重要的是,它是响应式的,无论你的显示屏多么宽都能 ...

  2. javascript使浏览器关闭前弹出确认

    当用户关闭页面时,弹出对话框,让用户确认是否关闭,选择确定则页面关闭,否则页面不关闭. 效果体验:http://keleyi.com/keleyi/phtml/js/index.htm 完整代码: & ...

  3. windows 安装 go语言

    下载地址:http://www.cnblogs.com/osfipin/p/4856839.html. 官方教程说明: Windows 对于Windows用户,Go项目提供两种安装选项(从源码安装除外 ...

  4. [deviceone开发]-do_Socket组件示例

    一.简介 do_Socket只实现了socket的客户端的功能,这个示例完整了展示了组件的基本用法,需要和sockettest3工具配合使用,sockettest3做为一个socket server来 ...

  5. ABAP可以提高效率的小语法

    ADD dobj1 TO dobj2. Effect This statement has the same effect as the statement COMPUTE dobj2 = dobj2 ...

  6. UITableView中的cell的优化

    1.cell的重用 所谓的cell的重用就是,视图加载的时候只会创建当前视图中的cell,或者比当前视图多一点的cell, 当视图滚动的时候,滚出屏幕的cell会放进缓存中,滚进屏幕的cell会根据I ...

  7. RxJava 和 RxAndroid 四（RxBinding的使用）

    对Rxjava不熟悉的同学可以先看我之前写的几篇文章 RxJava 和 RxAndroid 一 (基础) RxJava 和 RxAndroid 二(操作符的使用) RxJava 和 RxAndroid ...

  8. 阿里云服务器怎么去掉tomcat的8080端口

    前言:最近在阿里云申请了一个云服务器,然后已买了一个域名.比如www.haha.com ; 在云服务器上安装了tomcat ,访问服务器就成了 http://www.haha.com:8080/ . ...

  9. android编译系统的makefile文件Android.mk写法

    Android.mk文件首先需要指定LOCAL_PATH变量,用于查找源文件.由于一般情况下Android.mk和需要编译的源文件在同一目录下,宏函数“my-dir”右编译系统提供的,用于返回当前路径 ...

  10. Android 数据库的事务

    什么是数据库的事务 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言书写的用户程序的执行所引起,并用形如begin ...