移动端开发兼容问题

ios兼容问题

高版本兼容

1、场景。
h5页面在touchmove时，由于ios自身的下拉回弹效果，底部会多出来一块空白屏。
2、解决方案。
直接禁止ios系统默认的滑动事件。
3、代码。

document.body.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, {passive:false});

时间格式兼容

1、场景。
字符串转时间，如果出现‘-’，ios是不能识别的，例如Date.parse(‘2019-9-4 11:17:21’)–在ios中会报错。
解决方案：把’-‘转换成’/’。
2、解决方案。
把‘-’转换为‘/’。
3、代码。

 date.replace(/\-/g,'/');

ios执行document.execCommand(“copy”)不生效

1、解决方案。
可以使用createTextRange选中文字后执行doucument.execCommand('copy).
2、代码。

copyAndTrans(index) {
    let element = document.getElementById("code_" + index);
    let oInput = document.createElement("input");
    oInput.value = element.innerText || "";
    document.body.appendChild(oInput);
    oInput.select(); // 选择对象
    // 执行浏览器复制命令
    if(document.execCommand("Copy")){
        document.execCommand("Copy")
    }else{
        oInput.setSelectionRange(0, oInput.value.length), document.execCommand('Copy');
    }
    oInput.className = "oInput";
    oInput.style.display = "none";        
}

input框

1、场景。
input框聚焦，ios出现outline或者阴影，安卓显示正常。
2、解决方案。

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

ios将数字当成电话。

1、场景。
ios系统中，会将数字误认为是电话号码，导致变色。
2、解决方案。
在标签加入如下代码。
3、代码。

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

安卓系统兼容问题

禁止安卓识别email。

1. 代码。

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

禁止图片点击放大。

1、场景。
部分安卓手机点击图片会放大，如需要禁止放大，需要设置css属性。
2、代码。

img{ 
    pointer-events: none; 
} 

但需要注意的是这个方法会让img标签的点击事件失效，如果需要给图片添加点击事件，就需要再给img写上一层。

其他

1、JS跳转手机QQ的聊天界面。
Android:URL
代码：mqqwpa://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web
ios:URL
代码：mqq://im/chat?chat_type=wpa&uin=your QQ&version=1&src_type=web
2、清楚button、input，a标签的默认样式
代码：

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

3、移动端H5 audio autoplay失效问题
场景：这个是因为自动播放网页中的音频或者视频，会给用户带来一些困扰或浪费不必要的流量消耗，所以ios和安卓通常会禁止自动播放和使用js的触发播放，因此必须由用户来触发才可以播放。
解决方法：先通过用户的touchstart触碰，触发播放并暂停（音频开始加载，后面JS再操作就没问题了）。
代码：

document.addEventListener('touchstart',function() {
      document.getElementsByTagName('audio')[0].play();
      document.getElementsByTagName('audio')[0].pause();
});