【原】webapp开发中兼容Android4.0以下版本的css hack
话说现在的手机型号越来越多，主要还是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的更多相关文章
- 关于软件开发中兼容win7注册表的解决方案
关于软件开发中兼容win7注册表的解决方案 编写人:CC阿爸 2014-3-14 l 近来在开发一winform程序时,发现在xp 系统访问注册表一切正常.可偏这个时候,微软又提醒大家.Xp今年 ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
- webapp开发中的一些注意的
和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(functio ...
- webApp开发中的总结
meta标签: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- Babel+vscode实现APICloud开发中兼容ES6及以上代码
本文出自APICloud官方论坛, 感谢论坛版主 penghuoyan 的分享. 使用APICloud开发时,考虑到兼容问题一直使用ES5开发,时间越久感觉越落后,整理了一个兼容ES6的开发环境, ...
- 搭建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 ...
- WebApp 开发中常用的代码片段
其实这里面的多数都是 iOS 上面的代码.其他平台的就没有去验证了. HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=de ...
- [iOS开发]Xcode8兼容iOS7以及低版本Xcode调试高版本iOS系统
现在的项目一般都要兼容iOS7系统,同时也要兼容iOS10,在Xcode8上面,默认情况下无法调试iOS7,因为缺乏调试iOS7需要的配置文件.同时在低版本的Xcode上面(8以下),也无法调试iOS ...
- Android4.0以上版本Http请求的问题
异常:android.os.NetworkOnMainThreadException Android 4.1项目:使用新浪微博分享时报: android.os.NetworkOnMainThreadE ...
随机推荐
- jQuery Layer mobile 弹出层
layer mobile是为移动设备(手机.平板等webkit内核浏览器/webview)量身定做的弹层支撑,采用Native JavaScript编写,完全独立于PC版的layer,您需要按照场景选 ...
- 编写高性能Javascript代码的若干建议
多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执 ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- Ubuntu 16.04 LTS 安装配置 Nginx 1.10.0 Php7.0-FPM
1. 安装Nginx,Php-7.0 ~$ sudo add-apt-repository ppa:nginx/stable ~$ sudo apt-get update ~$ sudo apt-ge ...
- html常用的综合体
clip:rect(20px 100px 50px 20px); clip属性中的rect,clip:rect(y1 x2 y2 x1)参数说明如下: y1=定位的y坐标(垂直方向)的起点 x1=定位 ...
- google不能访问的根本解决方法
最近中国的防火墙又调皮了.直接出现404了.以前通过IP访问的方式也失效了.难道这种问题能难倒我们这些做技术的IT工程师么?! 经过我的查询,我发现还是有大神在研究这块的.大神针对开发经常访问的网站做 ...
- asp.net mvc SelectList 的selected 失效及解决方案
ViewData 名 不能和 绑定的 DropdownListFor的字段名 重复
- mysql 数据库乱码问题
mysql 数据库乱码问题,按如下顺序检查,一步一步排除出错位置. 最好全部编码都使用UTF8编码. 网页页面编码方式使用UTF8: <meta http-equiv="Content ...
- Java编译器如何生成重载和覆盖方法代码
下面是一个很简单的例子,关于Java中的多态:方法重载和方法覆盖: 多态指的是方法在不同的时刻表现出不同的形式:在编译期间,这被叫做方法重载:方法重载允许相关的方法被同一个方法名字调用,这有时候被叫做 ...
- Sql Server之旅——终点站 nolock引发的三级事件的一些思考
曾今有件事情让我记忆犹新,那年刚来携程不久,马上就被安排写一个接口,供企鹅公司调用他们员工的差旅信息,然后我就三下五除二的给写好 了,上线之后,大概过了一个月...DBA那边报告数据库出现大量锁超时, ...