移动端开发兼容问题

Posted 2020-11-21 sunshinezjb

WEB前端开发中，除了对PC端浏览器进行各浏览器兼容，移动端页面中安卓端和ios端的页面兼容也是有很多问题是让人费解和烦恼的，今天我来总结10个常见的兼容问题，供大家常考学习下。

1、IOS下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题，使用opacity=1来解决

2、一些情况下对非可点击元素如(label,span）监听点击事件，不会在IOS下触发，css增加cursor:pointer就搞定了

3、1px边框问题使用

xx:before{

content:‘‘;

position: absolute;

top: 0;

left: 0;

border: 1px solid #ccc;

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;

}

4、input为fixed定位在IOS下的bug问题，单击焦点输入，输入跳转到中间，可以使用内容滚动框也是fixed来设置

5、移动端字体小于12px使用四周边框或者背景色块，安卓文字偏上bug问题，可以使用整体放大1倍再缩放，而且字体不要是奇数

6、在移动端图片上传图片 使用accept="image/*" multiple,兼容低端机的问题

7、在h5嵌入app中，IOS如果出现垂直滚动条时，手指开始滚动页面后，滚动很快停止，就像边刹车边行驶一样，有“滚动很吃力”的感觉self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”

8、click 300ms 延时响应 使用 Fastclick

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );

9、input 有placeholder情况下不要设置行高，否则会偏上

10、移动端适配可以使用lib-flexible