移动端开发的兼容问题

移动端开发的兼容问题

文章已同步个人github笔记 https://github.com/ymblog/blog，欢迎你们加star~~，加star后人生更加美好……

一、ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。

解决方案:使用opacity=1来解决

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

解决方案:css增长cursor:pointer就搞定了

三、移动端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;
}

四、input为fixed定位，在ios下input固定定位在顶部或者底部，在页面滚动一些距离后，点击input(弹出键盘)，input位置会出如今中间位置。

解决方案:内容列表框也是fixed定位,这样不会出现fixed错位的问题

五、移动端字体小于12px使用四周边框或者背景色块，部分安卓文字偏上bug问题。

解决方案:可使用总体放大屏幕的dpr倍(width、height、font-size等等)再使用transform缩放,使用canvas在移动端会模糊也须要这样的解决方案

六、在移动端图片上传图片兼容低端机的问题。

解决方案:input 加入属性 accept="image/*" multiple

七、在h5嵌入app中，ios若是出现垂直滚动条时，手指滑动页面滚动以后，滚动很快停下来，好像踩着刹车在开车，有“滚动很吃力”的感受。

解决方案:

self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”

八、移动端click 300ms 延时响应

解决方案:使用 Fastclick

window.addEventListener( "load", function() {
  FastClick.attach( document.body );
}, false );

九、在安卓机上placeholder文字设置行高会偏上

解决方案:input有placeholder状况下不要设置行高

十、overflow:scroll，或者auto在iOS上滑动卡顿的问题

解决方案:加入-webkit-overflow-scrolling:touch;

十一、移动端图片压缩预览上传的问题，能够参考个人一篇文章https://segmentfault.com/a/11...

十二、移动端适配可使用lib-flexible https://github.com/amfe/lib-f...，使用rem来布局移动端有一个问题就是px的小数点的问题，不一样的手机对于小数点处理方式不同，有些是四舍五入，有些直接舍去掉，所以在自动生成雪碧图时候图标四周适当留2px的空间，防止图标被裁剪掉

1三、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后人生更加美好……

以后有问题会陆续更新上去，你们有更多的兼容问题或者以上有问题能够在评论中留言。