ios、安卓前端兼容性

2022-07-17 08:37:57

1.日期兼容性

解决方法（请看我上一篇文章）
安卓、ios时间转换成时间戳的形式

2.input框聚焦，ios出现outline或者阴影，安卓显示正常

解决方法

input:focus{outline:none}
input:{-webkit-appearance: none;}

3.关于flex布局

解决方法
flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行啦。
如果你的布局必须要用到换行，那就在外层包裹一个大的div，然后设置几个小div，每个小div的布局都是flex（但是不换行哦）；（希望你能理解我的意思，如果不理解，可以在下方留言，我会实时做出解答）

4.ios系统，会将数字当成电话号码，导致变色

解决方法

<meta name="format-detection" content="telephone=no"> 
<meta http-equiv="x-rim-auto-match" content="none">

将上面的代码加入到<head>标签中

5.禁止安卓识别email

解决方法

<meta content="email=no" name="format-detection" />

6.input 的placeholder属性会使文本位置偏上

解决方法

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

7.input type=number之后，pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

8.禁止图片点击放大--部分安卓手机点击图片会放大，如需要禁止放大，只需要设置css属性

img{ 
    pointer-events: none; 
}

这个会让img标签的点击事件失效，如果想要给图片添加点击事件就要给上面再写一层

9.禁止页面缩放

这样设置在ios10系统中是失效的，如果需要禁止ios缩放，下面代码亲测有用

window.onload=function () { 
      禁止双击放大 
      document.addEventListener(‘touchstart‘,function (event) {  
            if(event.touches.length>1){  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener(‘touchend‘,function (event) {  
            var now=(new Date()).getTime();  
            if(now-lastTouchEnd<=300){  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false);
      禁止手势放大
      document.addEventListener(‘gesturestart‘, function (event) {
         event.preventDefault();
      });
}

10.一些情况下对非可点击元素如(label,span）监听点击事件，不会在IOS下触发，css增加cursor:pointer就搞定了（未测试）

11.上下拉动滚动条时卡顿、慢（未测试）

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

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

结语

上面的兼容，都是在开发中遇到的，据个人经验，这些方法都是可行的，如有解决不了的情况，请根据自己的情况对号入座哇！
兼容性可能不太全，以后如果有遇到其他的情况，我会在此篇的文章后补全的；