挪动端开辟的兼容问题

2024年2月26日 112次阅读 来源: 余木

挪动端开辟的兼容题目

文章已同步我的github笔记
https://github.com/ymblog/blog，迎接人人加star~~，加star后人生越发优美……

1、ios下input为type=button属性disabled设置true,会涌现款式笔墨和背景非常题目。

处理方案:运用opacity=1来处理

2、对非可点击元素如(label,span)监听click事宜，部份ios版本下不会触发。

处理方案:css增添cursor:pointer就搞定了

3、挪动端1px边框

处理方案：比方按钮的box的class为btn

.btn: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下input牢固定位在顶部或许底部，在页面转动一些间隔后，点击input(弹出键盘)，input位置会涌如今中心位置。

处理方案:内容列表框也是fixed定位,如许不会涌现fixed错位的题目

5、挪动端字体小于12px运用周围边框或许背景色块，部份安卓笔墨偏上bug题目。

处理方案:能够运用团体放大屏幕的dpr倍(width、height、font-size等等)再运用transform缩放,运用canvas在挪动端会隐约也须要如许的处理方案

6、在挪动端图片上传图片兼容低端机的题目。

处理方案:input 到场属性 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、在安卓机上placeholder笔墨设置行高会偏上

处理方案:input有placeholder情况下不要设置行高

10、overflow:scroll，或许auto在iOS上滑动卡顿的题目

处理方案:到场-webkit-overflow-scrolling:touch;

11、挪动端图片紧缩预览上传的题目，能够参考我的一篇文章https://segmentfault.com/a/11…

12、挪动端适配能够运用lib-flexible https://github.com/amfe/lib-f…，运用rem来规划挪动端有一个题目就是px的小数点的题目，差别的手机关于小数点处理方式不一样，有些是四舍五入，有些直接舍去掉，因此在自动天生雪碧图时刻图标周围恰当留2px的空间，防备图标被裁剪掉

13、iphonex的适配的处理方案

<meta name="viewport" content="...,viewport-fit=cover" />
body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

完毕……撒花~~

文章已同步我的github笔记
https://github.com/ymblog/blog，迎接人人加star~~，加star后人生越发优美……

以后有题目会连续更新上去，人人有更多的兼容题目或许以上有题目能够在批评中留言。

    原文作者：余木
    原文地址: https://segmentfault.com/a/1190000009898072
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞