2个月前,我在博文《webapp开发中兼容Android4.0以下版本的css hack》中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了 ,在这里纠正下,在目前Wepapp开发中,主要对webkit内核的手机做好各个版本的兼容已经不够了,像其它的高端智能手机,在市场有一定的占有率也是我们需要列入考虑的范围。

那么,除了ios和android系统之外,还有哪个移动设备的操作系统是我们需要考虑进来的呢?可能大家会在猜是winphone,没错!就是微软发布的一款手机操作系统Windows Phone,虽然用户不算太多,但是这部分用户也是我们需要考虑到的,至少要保证网页在winphone的展现是正常的。目前winphone有几个版本,主要是Windows Phone 7 和Windows Phone 8,其对应的浏览器分别是IE9和IE10。那么,webapp开发中除了兼容ios3.0~7.0,android2.1~4.2,还要兼容的是IE9~11。

近期在研究css3的性能,顺手也整理了常见CSS3属性对ios&android&winphone支持,今天分享给大家,如下:

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

总结

对于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\0;}

上述可知,在Webapp开发中,我们可以把移动设备分为低端系统(IE9、android2.1~3.0、ios3.2)和高端系统(ios4+、android4.1~4.2),针对低端系统,采用普通方案,并使用hack兼容,针对高端系统,可以采用更丰富更炫酷的效果。移动设备更新换代的很快,目前各种手机的最新版本系统已经支持css3的大部分效果,相信在未来对css3的支持可以达成统一。

关于Webapp开发的兼容处理,可以参考如下的文章:

【原】webapp开发中兼容Android4.0以下版本的css hack

【原】使用iScroll.js解决ios4下不支持position:fixed的问题

【原】[webkit移动开发笔记]之兼容iPhone4和iPhone5的方法

【原】欺骗浏览器的CSS(最新兼容) 一直更新

【原】常见CSS3属性对ios&android&winphone的支持的更多相关文章

  1. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

  2. 移动端 几个css3属性的练习

    转行做前端,上班有一个星期了,什么都不懂,今天学习了几个新的css3属性,记录下来. 注:所有的测试均是在chrome上手机模式测试,与真实的手机环境可能有误差 1:-webkit-tap-heigh ...

  3. 移动端热更新方案(iOS+Android)

    PPT资源包含iOS+Android 各种方案分析:https://github.com/qiyer/Share/blob/master/%E7%83%AD%E6%9B%B4%E6%96%B0%E5% ...

  4. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  5. CSS3 Media Queries_media queries, css3属性详解

    Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...

  6. Lottie在手,动画我有:ios/Android/Web三端复杂帧动画解决方案

      为什么需要Lottie 在相对复杂的移动端应用中,我们可能会需要使用到复杂的帧动画.例如: 刚进入APP时候可能会看到的入场小动画,带来愉悦的视觉享受 许多Icon的互动变化比较复杂多变的时候,研 ...

  7. iOS/Android 浏览器(h5)及微信中唤起本地APP

    在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...

  8. H5、CSS3属性的支持性以及flex

    一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...

  9. iOS/Android/Web Url Encode空格處理 原文連結:http://read01.com/3gDO.html

    iOS/Android/Web Url Encode空格處理 原文連結:http://read01.com/3gDO.html 前言 這裡只是講一個故事,一個發生在我身上的真實的故事.曾經,我以為搞加 ...

随机推荐

  1. let it be

    回家路上听到电台里主持人在介绍这首歌,听得我两眼模糊,真的太应最近的心情了. let it be.

  2. oracle数据库备份与还原

    一  关于expdp和impdp     使用EXPDP和IMPDP时应该注意的事项:EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用.EXPDP和IMPDP是服务端的工具程 ...

  3. 谈谈我对Java中CallBack的理解

    谈谈我对Java中CallBack的理解 http://www.cnblogs.com/codingmyworld/archive/2011/07/22/2113514.html CallBack是回 ...

  4. servlet(3):servlet和filter&lt;url-pattern&gt;配置

    一,servlet容器对url的匹配过程: 当 一个请求发送到servlet容器的时候,容器先会将请求的url减去tomcat的上下文路径(配置的访问系统的基础路径例如intellij idea配置的 ...

  5. centos查看系统/硬件信息及运维常用命令

    [root@yan-001 ~] # uname -a # 查看内核/操作系统/CPU信息的linux系统信息命令 [root@yan-001 ~] # head -n 1 /etc/issue # ...

  6. IIS 无法显示网页 目前访问网站的用户过多

    最近把一个服务部署到XP系统的IIS上,供其他程序调用,在访问了几个页面后,会出现“无法显示网页 目前访问网站的用户过多”的提示. 网上找了,果然有解决方法: 1.打开IIS,在网站上右键,选择“属性 ...

  7. npx 知识点

    npx 介绍:https://segmentfault.com/a/1190000010149499

  8. Python学习笔记14—模块

    在python中所有的模块都被加入到了sys.path中,用下面的方法可以看见模块的位置. >>> import sys >>> import pprint > ...

  9. visual studio 菜单栏显示异常 插件安装异常 扩展异常修复

    这几天在使用Visual studio 的扩展插件的时候,遇见了菜单栏显示异常,解决方案显示异常的问题,如下: 经过自己的一顿摸索,解决方法如下,比如我在安装gitee或github插件之后就出现了这 ...

  10. [转]Python-__builtin__与__builtins__的区别与关系(超详细,经典)

    在学习Python时,很多人会问到__builtin__.__builtins__和builtins之间有什么关系.百度或Google一下,有很 多答案,但是这些答案要么不准确,要么只说了一点点,并不 ...