移动端安卓和ios常见的兼容性问题汇总，你遇到过几个？

04-13 阅读 0评论

1.html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel：就可以了。如下：

$移动端安卓和ios常见的兼容性问题汇总，你遇到过几个？,移动端安卓和ios常见的兼容性问题汇总，你遇到过几个？,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,方法,设置,第1张$

（图片来源网络，侵删）

400-810-6999 转 1034

拨打手机如下：

点击拨打 15677776767

2.上下拉动滚动条时卡顿、慢

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

Android3+和 iOS5+支持 CSS3 的新属性为 overflow-scrolling。

3.圆角bug

某些 Android 手机圆角失效

background-clip: padding-box;

4.ios 设置input 按钮样式会被默认样式覆盖

解决方式如下：

input,textarea {
border: 0;
-webkit-appearance: none;
}

设置默认样式为 none

5.IOS键盘字母输入，默认首字母大写

解决方案，设置如下属性

（图片来源网络，侵删）

6.h5底部输入框被键盘遮挡问题

h5页面有个问题是，当输入框在最底部，点击软键盘后输入框会被遮挡。

解决办法：由于弹起输入法，会执行onresize 事件，根据窗口变化，将原先是固定定位的元素改为position:static;。当关闭输入法时再切换回position:absolute;。

var getHeight = $(document).height();
$(window).resize(function(){
 if($(document).height()  
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.开启硬件加速 
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); 
10.fixed定位缺陷 
iOS 下，fixed定位的元素里如果有input，键盘弹起后，点击定位会上移，显示定位也会出问题 
解决：不使用fixed 
body {height: 100%;} 
使用absolute 替代 fixed，相对于body定位 
11.1px问题 
1.体查询利用设备像素比缩放，设置小数像素； 
    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    } 
2.transform: scale(0.5) 方案 
div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
} 
12.首屏白屏问题 
减少入口文件 
静态资源本地存储 
图片压缩 
UI框架按需加载 
重复组件打包优化 
SSR 
GZip 
13.轮播图提前占位 
height:0;
font-size:0;
padding-bottom:33% 
14.滚动条隐藏 
在PC端隐藏html右侧默认滚动条 
html {
        /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
        -ms-overflow-style:none;
        /*火狐下隐藏滚动条*/
        scrollbar-width: none;
    }
  /*Chrome下隐藏滚动条，溢出可以透明滚动*/
html::-webkit-scrollbar{width:0px} 
移动端隐藏滚动条 
1）给滚动条的部分设置宽高为100%， overflow-y: auto; 
2）设置滚动条的部分::-webkit-scrollbar{ 
width: 0;
display:none;
} 
至此，移动端常见的兼容性问题就分享完了。你还遇到过哪些，欢迎补充分享哟！