WEB前端开发中,除了对PC端浏览器进行各浏览器兼容,移动端页面中安卓端和IOS端的页面兼容也是有不少问题是让人费解和烦恼的,今天我来总结10个常见的兼容问题,供你们常考学习下。css
一、IOS下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题,使用opacity=1来解决前端
二、一些状况下对非可点击元素如(label,span)监听点击事件,不会在IOS下触发,css增长cursor:pointer就搞定了web
三、1px边框问题使用浏览器
xx:before{app
content:'';学习
position: absolute;字体
top: 0;flex
left: 0;spa
border: 1px solid #ccc;orm
width: 200%;
height: 200%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
四、input为fixed定位在IOS下的bug问题,单击焦点输入,输入跳转到中间,可使用内容滚动框也是fixed来设置
五、移动端字体小于12px使用四周边框或者背景色块,安卓文字偏上bug问题,可使用总体放大1倍再缩放,并且字体不要是奇数
六、在移动端图片上传图片 使用accept="image/*" multiple,兼容低端机的问题
七、在h5嵌入app中,IOS若是出现垂直滚动条时,手指开始滚动页面后,滚动很快中止,就像边刹车边行驶同样,有“滚动很吃力”的感受self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”
八、click 300ms 延时响应 使用 Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
九、input 有placeholder状况下不要设置行高,不然会偏上
十、移动端适配可使用lib-flexible