【原】webapp开发中兼容Android4.0以下版本的css hack-阿里云开发者社区

开发者社区> 白树> 正文

【原】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,本篇文章结束,感谢公司某同事提供的兼容办法,写出来共享,希望好的东西能够帮助到更多的朋友,解决大家的困扰~

作者:白树

出处:http://peunzhang.cnblogs.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Oracle 11g R2版本使用exp命令导出表不全的解决方案
建议使用 expdp和 impdp 替代  exp和imp 命令!
593 0
十分钟上线-基于函数计算开发 Restful web api & asp.net core web app
.NET Core是一个开源通用的开发框架,支持跨平台, 阿里云函数计算推出了 dotnetcore2.1 runtime, 使用 C# 编写 serverless 函数, 除了很好地支持通常意义上的函数外, 还可以基于函数计算开发 asp.
4386 0
Android官方开发文档Training系列课程中文版:连接无线设备之通过P2P搜索网络服务
原文地址:http://android.xsoftlab.net/training/connect-devices-wirelessly/nsd-wifi-direct.html 本阶段的第一节课 Using Network Service Discovery 展示了如何搜索本地网络服务。
800 0
你用.NET开发APP时,在云平台打包APP要填个“包名”的含义
很多人在使用Smobiler Cloud打包时,会对Cloud上要填写的“包名”产生疑惑,不知道这是什么,或者为什么要这么写。
1247 0
【更新公告】App 4.21.6 ~ 4.22.1 版本
持续不停的在更新,登录、费用、域名等大的板块都有较多的更新,欢迎大家试用反馈。
105 0
阿里云新品发布会第36期 丨 移动开发平台mPaaS重磅发布
点击订阅新品发布会! 新产品、新版本、新技术、新功能、价格调整,评论在下方,下期更新!关注更多新品发布会! 新品发布会动态 移动开发平台mPaaS重磅发布 快速构建一款 App 并不难,但如何从容应对复杂机型及系统版本,构建快速迭代的端上架构,实现动态更新、稳定流畅的应用移动开发者的核心课题。
3021 0
PHPpraffa也有了,一个PHP版本的阿里云函数计算与API网关的开发框架
发布了Python版本的函数计算与API网关的开发框架后,一直觉得对不起PHP,因为公司一直是用PHP的,我这弄了个Python,实在不该,对了,(Python版本说明点这里。 PHPpraffa是什么? PHPpraffa 是praffa的PHP版本。
1135 0
+关注
72
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载