网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看.  以下资料由微信产品部"白树"整理, 转载请注明.

√:完全支持   √:部分支持   ×:不支持   (-webkit):添加-webkit前缀才支持   (-ms):添加 -ms前缀才支持

css3总结:

对于webkit内核的浏览器, 除media、text-shadow外,使用其它属性基本上要加上webkit前缀.

gradient在低版本的系统中渲染效果不丰富

ios3.2~4.3不支持position:fixed,不推荐使用

android2.1~2.3对动画的支持效果不丰富

android2.1~2.3不支持translate3d,可以利用它结合media写低端android版本的css hack

对于winphone的IE浏览器

IE9~11支持media、box-shadow、border-radius

IE9对动画不支持

IE9不支持box布局

IE9不支持渐变,看具体情况可适当使用IE滤镜

仅支持IE9的写法:{属性:属性值9;}

上述可知,在Webapp开发中,我们可以把移动设备分为低端系统(IE9、android2.1~3.0、ios3.2)和高端系统(ios4+、android4.1~4.2),

针对低端系统,采用普通方案,并使用hack兼容,针对高端系统,可以采用更丰富更炫酷的效果。

移动设备更新换代的很快,目前各种手机的最新版本系统已经支持css3的大部分效果,相信在未来对css3的支持可以达成统一。

    • 来源:转载
    • 原作者:白树 - http://peunzhang.cnblogs.com/
    • 版权声明:欢迎转载,但请以连接方式备注出处、作者。
    • 本文链接地址:http://www.lao8.org/article_1371/shouji_css3_jianrong
    • 文章名:css3在不同型号手机浏览器上的兼容一览表

css3在不同型号手机浏览器上的兼容一览表的更多相关文章

  1. flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器)

    如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span ...

  2. 怎么在手机浏览器上访问电脑本地的文件,局域网内,自建WiFi也可以

    首先,电脑要有Mysql+Apache+PHP环境,我直接用Wampsever,开启环境后手机和电脑要再同一个局域网内,然后电脑上打开win+R,输入cmd,再输入ipconfig,就可以看着这台的电 ...

  3. JQuery Mobile 的引用代码,以及在手机浏览器上字体太小的解决办法

    JQuery Mobile 的引用代码: <link rel="stylesheet" href="http://code.jquery.com/mobile/1. ...

  4. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  5. 禁用iPhone手机浏览器上给电话号码自动加上的link样式

    iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话号码的数字 加上link样式. 可以添加下面的meta禁用掉这个功能. // //

  6. 禁用iPhone手机浏览器上给电话号码自动加上的link样式(苹果手机自动给手机号加样式)

    原文地址:http://blog.csdn.net/atec2000/article/details/44631633 iPhone手机上的浏览器(如Safari),在解析网页的时候会自动给 像是电话 ...

  7. 解决手机浏览器上input 输入框导致页面放大的问题(记录)

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  8. body中设置-webkit-scrollbar竖向滚动条,在手机浏览器上无效

    暂时无解,如果是chrome的PC模式,滚动条是没有的,但如果是手机模式,滚动条会出现,且无法设置其样式,滚完后会自动消失. 如果设置div这些块元素,完全没问题.

  9. 【转】让iframe在iOS设备手机浏览器上支持滚动

    HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <i ...

随机推荐

  1. 利用RxJava获取手机已安装的App的图片、应用名称和版本号

    先上效果图: 获取手机已安装的App列表利用Android系统API就可以办到,这里为什么要引入RxJava?现在我们假设一下有下面几个需求: 1.我们不需要所有的App,只需要用户安装的第三方App ...

  2. NSURLConnection获取一个MP3文件

    NSURLConnection网络请求 直接上代码-这个没什么说的,你们自己有兴趣可以自己试试 代码 #import "ViewController.h" @interface V ...

  3. 手把手教你使用Git

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  4. js 继承

    ECMAScript只支持实现继承(继承实际的方法),主要依靠原型链来实现. 1.原型链 基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 示例: function SuperType ...

  5. 史上最详细“截图”搭建Hexo博客——For Windows

    http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

  6. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  7. Web端即时通讯技术原理详解

    前言 有关IM(InstantMessaging)聊天应用(如:微信,QQ).消息推送技术(如:现今移动端APP标配的消息推送模块)等即时通讯应用场景下,大多数都是桌面应用程序或者native应用较为 ...

  8. Thrift 跨服务开发框架

    Thrift概述 Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP,Ruby, Erla ...

  9. 根据上一行填充本行的空白栏位,SQL处理方式

    我在4年多前,写了一篇Excel处理空白Cell的文章,http://www.cnblogs.com/studyzy/archive/2010/04/07/1706203.html,其实在数据库中也会 ...

  10. dos2unix用法

    windows下编写的脚本,上传到linux上执行,有时会出现莫名其妙的结果,也是折腾了半天才找出原因,windows和linux有些编码不同,经dos2unix处理后,结果一切正常man dos2u ...