您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 徐州分类信息网,免费分类信息发布

10个你不得不知的WEB移动端开发的兼容问题

2022/11/23 6:22:19发布59次查看
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
徐州分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录