css3在不同型号手机浏览器上的兼容一览表

网上搜集了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的支持可以达成统一。

      • 来源:转载
时间: 2024-08-18 18:21:41

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

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

首先,电脑要有Mysql+Apache+PHP环境,我直接用Wampsever,开启环境后手机和电脑要再同一个局域网内,然后电脑上打开win+R,输入cmd,再输入ipconfig,就可以看着这台的电脑的ip了一般是IPv4 地址 . . . . . . . . . . . . : 192.168.X.X”的一般就是你的内网IP了,然后在手机浏览器上直接输入这个内网IP,就可以访问到环境根目录中的文件了.

一步使你的asp.net网站在手机浏览器上全屏显示

一步使你的asp.net网站在手机浏览器上全屏显示 1.问题 公司的asp.net网页在手机浏览器上初始化时显示的是缩放的页面,用户必须手动放大才能看清页面的字体,这样体验不好 2.解决 前段时间学习JQuery mobile 看到所有的demo页面都能全屏显示在手机上,页面上面都有这样一段代码: ? 1 <meta name="viewport" content="width=device-width, initial-scale=1"> 参数说明:

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

在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */

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

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

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

HTML代码 在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <iframe src=""></iframe> </div> 这个DIV将作为支持内部滚动的基础容器. CSS 代码 要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property): .scroll-wrapper { -we

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

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

asp.net网站在手机浏览器上全屏显示

前段时间要把asp.net 网站,在手机上全屏浏览,发现总是小小的一块,不能全屏 后来发现 JQuery Mobile  中在开头都用 <meta name="viewport" content="width=device-width, initial-scale=1"> 然后在项目中加上以后就可以全屏显示了 参数说明: width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 mi

select下拉框的样式在浏览器上的兼容问题

最近项目中遇到了自定义下拉框的默认样式在谷歌,火狐,IE上显示不同的问题. 左侧图片就是重写的样式,下拉框的右侧三角是选用的bootstrap里面的图片,通过绝对定位放过去的. css: select { /*Chrome同Firefox与IE里面的右侧三角显示的样式不同*/ border: solid 1px #ddd; /*将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; p

关于c3样式在浏览器上的兼容问题

1,在存在transition的元素执行动画时对下面元素的影响及解决方法: A,对position:fixed影响:造成定位元素抖动,解决方法: -webkit-transform-style:preserve-3d; -webkit-backface-visibility:hidden; B,字体模糊,这主要是transform位移取值不为整数引起的,解决方法: a,-webkit-font-smoothing: antialiased; /*chrome.safari*/ -moz-osx-