移動端開發兼容問題

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