安卓与ios兼容性问题解决

1、new Date获取时间戳

在安卓机上new Date('2019-9-10')可以成功获取时间戳，ios无法获取

处理方法: 将字符串中-替换成/，.replace(/\-/g,'');

2、点击复制功能

安卓和ios是不同的实现方式，详见我之前的一篇博客

https://blog.csdn.net/weixin_39327883/article/details/89207116

3、input获取焦点

安卓获取焦点弹起键盘后再失去焦点，页面成功复原

ios失去焦点后页面无法回滚和复原，需要手动重置一下scrolltop

4、input边框背景问题

安卓和ios将背景和边框设为透明兼容性写法

兼容写法:background:transparent; FILTER:alpha(opacity=0);border:none;

5、input选择图片

<input type="file" accept="image/*" capture="camera">

安卓如果要支持相册和拍照需要有capture属性

ios需要将capture属性去掉(removeAttribute)

6、video标签

由于微信浏览器安卓和ios的内核不同，安卓为x5内核，ios为chrome内核，导致video视频在安卓播放时会强制全屏并且在最高层级，所以我自己的处理方法是视频暂停时先将video标签隐藏，显示出页面其他元素。 

7.禁止复制、选中文本

设置CSS属性 -webkit-user-select:none

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

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

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

9.清除button,input,a标签的默认样式

a:hover, a:active,button,input:focus{
  outline: none;
  border: none;
}

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

img{ 
    pointer-events: none; 
} 

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

11.禁止页面缩放

这样设置在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();
      });
}

 本文参考了其他博客等资料