移动端常见的兼容性问题汇总，你遇到过几个？
相信前端程序员们在工作中都会遇到各种兼容性问题，今天把我遇到的这些兼容性问题做个汇总。看看你遇到过吗？
1.html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签，只要在a标签的href中添加tel：就可以了。如下：
拨打手机如下：
2.上下拉动滚动条时卡顿、慢
Android3+和 iOS5+支持 CSS3 的新属性为 overflow-scrolling。
3.圆角bug
某些 Android 手机圆角失效
4.ios 设置input 按钮样式会被默认样式覆盖
解决方式如下：
设置默认样式为 none
5.IOS键盘字母输入，默认首字母大写
解决方案，设置如下属性
6.h5底部输入框被键盘遮挡问题
h5页面有个问题是，当输入框在最底部，点击软键盘后输入框会被遮挡。
解决办法：由于弹起输入法，会执行onresize 事件，根据窗口变化，将原先是固定定位的元素改为position:static;。当关闭输入法时再切换回position:absolute;。
7.IOS移动端click事件300ms的延迟响应
解决方案：
1、fastclick可以解决在手机上点击事件的300ms延迟
2、zepto的touch模块，tap事件也是为了解决在click的延迟问题
3、触摸事件的响应顺序为touchstart –> touchmove –> touchend –> click,也可以通过绑定ontouchstart事件，加快对事件的响应，解决300ms延迟问题
8.在ios和andriod中,audio元素和video元素在无法自动播放
应对方案：触屏即播$('html').one('touchstart',function(){audio.play()})
9.CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
2.开启硬件加速
10.fixed定位缺陷
iOS 下，fixed定位的元素里如果有input，键盘弹起后，点击定位会上移，显示定位也会出问题
解决：不使用fixed
使用absolute 替代 fixed，相对于body定位
11.1px问题
1.体查询利用设备像素比缩放，设置小数像素；
2.transform: scale(0.5) 方案
12.首屏白屏问题
减少入口文件
静态资源本地存储
图片压缩
UI框架按需加载
重复组件打包优化
SSR
GZip
13.轮播图提前占位
14.滚动条隐藏
在PC端隐藏html右侧默认滚动条
移动端隐藏滚动条
1）给滚动条的部分设置宽高为100%， overflow-y: auto;
2）设置滚动条的部分::-webkit-scrollbar{
至此，移动端常见的兼容性问题就分享完了。你还遇到过哪些，欢迎补充分享哟！
2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/95298.html
