移动端开发兼容问题

移动端h5开发遇到的兼容问题

  • ios兼容问题
    • 高版本兼容
    • 时间格式兼容
    • ios执行document.execCommand("copy")不生效
    • input框
    • ios将数字当成电话。
  • 安卓系统兼容问题
    • 禁止安卓识别email。
    • 禁止图片点击放大。
      • 其他

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();
});

你可能感兴趣的:(前端,h5开发,兼容性)