移动端的兼容

139 阅读1分钟

方法一:body添加ontouchstart

方法二:js给 document 绑定 touchstart 或 touchend 事件

a {

color:#000;

}

a:active {

color:#fff;

}

bar

document.addEventListener('touchstart',function(){},false);

2、动画定义3D启用硬件加速

Element {

-webkit-transform:translate3d(0,0,0)

transform: translate3d(0,0,0);

}

注意:3D变形会消耗更多的内存与功耗

3、Retina屏的1px边框

Element{

border-width:thin;

}

4、webkit mask 兼容处理

某些低端手机不支持css3 mask,可以选择性的降级处理。

比如可以使用js判断来引用不同class:

if('WebkitMask'indocument.documentElement.style){

alert('支持mask');

}else{

alert('不支持mask');

}

5、旋转屏幕时,字体大小调整的问题

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6{

-webkit-text-size-adjust:100%;

}

6、transition闪屏

/设置内嵌的元素在3D 空间如何呈现:保留3D /

-webkit-transform-style: preserve-3d;

/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /

-webkit-backface-visibility:hidden;

7、圆角bug

某些Android手机圆角失效

background-clip: padding-box;