移动端开发的兼容问题

weakish 发布于2019-08-29 12:48 / 1443人阅读

摘要：移动端开发的兼容问题文章已同步我的笔记，欢迎大家加，加后人生更加美好下为属性设置会出现样式文字和背景异常问题。解决方案可以使用整体放大屏幕的倍等等再使用缩放使用在移动端会模糊也需要这样的解决方案在移动端图片上传图片兼容低端机的问题。

移动端开发的兼容问题

文章已同步我的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的适配的解决方案


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

之后有问题会陆续更新上去，大家有更多的兼容问题或者以上有问题可以在评论中留言。

云服务器 GPU云服务器兼容支持webrtc的移动端 webrtc移动端兼容性移动端开发 Js的兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112156.html

移动端开发的兼容问题

摘要：移动端开发的兼容问题文章已同步我的笔记，欢迎大家加，加后人生更加美好下为属性设置会出现样式文字和背景异常问题。解决方案可以使用整体放大屏幕的倍等等再使用缩放使用在移动端会模糊也需要这样的解决方案在移动端图片上传图片兼容低端机的问题。移动端开发的兼容问题文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生...

wyk1184 2019-08-20 17:28 评论0 收藏0
移动端开发的兼容问题

摘要：移动端开发的兼容问题文章已同步我的笔记，欢迎大家加，加后人生更加美好下为属性设置会出现样式文字和背景异常问题。解决方案可以使用整体放大屏幕的倍等等再使用缩放使用在移动端会模糊也需要这样的解决方案在移动端图片上传图片兼容低端机的问题。移动端开发的兼容问题文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生...

songjz 2019-08-01 17:01 评论0 收藏0
Mac联机调试移动端页面方法和移动端IOS遇到的兼容性问题

摘要：移动端失效需求点击一个，让某一个聚焦并弹出虚拟键盘。安卓可以聚焦，但是不会弹出虚拟键盘说明安卓机的表现也是异常的无法聚焦，也不会弹出虚拟键盘所以我的这边的实践结论是，如果希望在页面初始化过程中，让自动聚焦并弹出虚拟键盘。移动端IOS遇到的兼容性问题和 Mac联机调试方法有时候遇到一些移动端「疑难杂症」，因为移动端不方便调试，可能找不到问题点，所以经常需要电脑端和移动端联机调试，...

CoreDump 2019-08-23 13:46 评论0 收藏0
前端系列——与众不同的移动端底部固定栏 fixed、absolute 兼容 iOS 和 Androi

摘要：底部定位为的情况下激活输入框时，底部不会弹出来合理。后遗症底部按钮和输入框区域一起随着滚动，不再置顶独立。当滚动区域超过一屏幕时，底部输入框定位出现错乱。传统解决办法通常将底部设置为，当激活输入框的时候，将底部定位改为，即可兼容和。相信我，我分享的和你在其他博客上看到的终极方案是如此的与众不同！做过移动端开发的同学，对底部DOM定位出现的各种奇葩情况已经深恶痛绝了吧，底部DOM设置...

Doyle 2019-08-21 17:56 评论0 收藏0