wap移动端兼容性
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的支持可以达成统一。
√:完全支持 √:部分支持 ×:不支持 (-webkit):添加-webkit前缀才支持 (-ms):添加 -ms前缀才支持
一些移动端浏览器的兼容性Bug
【UC浏览器】video标签脱离文档流
场景:<video>标签的父元素(祖辈元素)设置transform样式后,<video>标签会脱离文档流。
测试环境:UC浏览器 8.7/8.6 + Android 2.3/4.0 。
Demo:http://t.cn/zj3xiyu
解决方案:不使用transform属性。translate用top、margin等属性替代。
【UC浏览器】video标签总在最前
场景:<video>标签总是在最前(可以理解为video标签的z-index属性是Max)。
测试环境:UC浏览器 8.7/8.6 + Android 2.3/4.0 。
【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象
场景:设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。
在8.6的版本,这个情况直接出现。
在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。
测试环境:UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。
Demo:http://t.cn/zYLTSg6
【QQ手机浏览器】不支持HttpOnly
场景:带有HttpOnly属性的Cookie,在QQ手机浏览器版本从4.0开始失效。JavaScript可以直接读取设置了HttpOnly的Cookie值。
测试环境:QQ手机浏览器 4.0/4.1/4.2 + Android 4.0 。
【MIUI原生浏览器】浏览器地址栏hash不改变
场景:location.hash 被赋值后,地址栏的地址不会改变。
但实际上 location.href 已经更新了,通过JavaScript可以顺利获取到更新后的地址。
虽然不影响正常访问,但用户无法将访问过程中改变hash后的地址存为书签。
测试环境:MIUI 4.0
【Chrome Mobile】fixed元素无法点击
场景:父元素设置position: fixed;
子元素设置position: absolute;
此时,如果父元素/子元素还设置了overflow: hidden 则出现“父元素遮挡该子元素“的bug。
视觉(view)层并没有出现遮挡,只是无法触发绑定在该子元素上的事件。可理解为:「看到点不到」。
补充: 页面往下滚动,触发position: fixed;的特性时,才会出现这个bug,在最顶不会出现。
测试平台: 小米1S,Android4.0的Chrome18
demo: http://maplejan.sinaapp.com/demo/fixed_chromemobile.html
解决办法: 把父元素和子元素的overflow: hidden去掉。
多数移动端浏览器都是使用的webkit内核(包括ios上的firefox),网页的表现效果基本无差别,需要考虑的是分辨率兼容等问题。
需要特别测试的是安卓上的firefox,因为是用的gecko内核,所以排版上会出现一些问题。所以要针对gecko进行适配性的测试和代码补充。
1、DOCTYPE 影响 CSS 处理
2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
3、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
4、div 的垂直居中问题:
vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}
百度手机浏览器HTML5兼容性测试得分超300,居业界领先水平。与Opera、苹果Safari等国际知名浏览器得分相近。
手机QQ浏览器是的内核目前有三款,Wekit内核的普版、腾讯自研X5内核的Q立方浏览器,还有使用普版UI、腾讯X5内核的手机QQ浏览器X5版,目前Q立方浏览器已经出了Beta3,手机QQ浏览器X5版还在内测。
Safari 浏览器没查到有什么兼容性问题。
转载于:https://www.cnblogs.com/shimily/articles/5276376.html