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