移動端常見兼容性問題解決方案

audio

• audio沒法自動播放(ios考慮到用戶體驗問題，限制audio必須在用戶主動交互以後纔可以播放) 解決方案:提早建立audio標籤，用戶交互以後觸發自動播放

//--建立觸摸監聽，當瀏覽器打開頁面時，觸摸屏幕觸發事件，進行音頻播放
document.addEventListener('touchstart', function () {
    var audio = document.getElementById('audio');
        audio.play();
});
複製代碼

• ios下audio只能播放一遍，再次play沒法繼續播放
  解決方案：play()前先load()下

var clickAudio = null;

// 播放點擊音效
function playClickMusic() {
    if (!clickAudio) {
      clickAudio = $('#click')[0];
    }
    clickAudio.load();
    clickAudio.play();
}
複製代碼

• ios自帶輸入法輸入中文連續觸發屢次input事件
  解決方案：利用compositionstart和compositionend事件做爲開關，中文輸入結束才觸發input事件，代碼以下，詳見ios自帶輸入法觸發屢次input解決方案

var flag = false;
$('#id').on({
    'compositionstart': function() {
      flag = true;
    },
    'compositionend': function() {
      flag = false;
      if(!flag) {
        //do something...
        doSomethingFunction();
      }
    },
    'input propertychange': function() {
        if(!flag) {
          //do something...
          doSomethingFunction();
        }
    }
});
複製代碼

video

• 頁面內播放
  解決方案：給video標籤添加playsinline屬性

<video src="" webkit-playsinline playsinline x5-playsinline></video>
複製代碼

注：x5內核-安卓下不能添加airplay="allow" x5-video-player-fullscreen="true" x-webkit-airplay="allow"（添加了以後playsinline屬性就失效了）

x5內核video api：騰訊x5內核api文檔中的video部分

• ios下視頻沒法播放常見緣由

一、若視頻是MP4格式則必須是h264編碼
二、視頻資源必須支持分片傳輸（非分片傳輸的話在safari中不能播放）

視頻文件分片傳輸參考：nginx文件分片傳輸配置

其餘

• click事件有延遲（緣由：客戶端瀏覽器通常雙擊可放大頁面，瀏覽器在檢測到第一次click事件時不會立刻觸發，通常會等到300ms後無下一次click事件後纔會觸發click事件）
  解決方案：fastclick

• 微信下長按保存圖片（微信下不支持經過爲a標籤添加download屬性直接下載圖片）
  解決方案：先用html2canvas將dom繪製在canvas上，而後使用絕對定位將圖片放置在某個按鈕之上（設置圖片opacity：0.01，讓圖片看不見），而後觸發上下文菜單供用戶保存圖片；

html2canvas使用注意事項：
一、不可以繪製display:none或者經過position移出顯示區的dom，可是能夠繪製z-index:-1的dom,詳見html2canvas踩坑記
二、 圖片模糊解決方案：先根據devicePixelRatio（設備像素比）放大canvas，關閉抗鋸齒，而後在放大的canvas上繪製；以後將canvas轉成base64圖片放在原始大小的img上；

// 長按保存示例代碼
// 注：生成的圖片需提早設置下opacity:0.01
// html2canvas要注意版本，不一樣版本api可能不一樣，此處使用的是0.5.0-beta3版本

var cntElem = $('.share-page')[0];
var shareContent = cntElem; //須要截圖的包裹的（原生的）DOM 對象
var width = shareContent.offsetWidth; //獲取dom 寬度
var height = shareContent.offsetHeight; //獲取dom 高度
var canvas = document.createElement("canvas"); //建立一個canvas節點
var scale = window.devicePixelRatio; //定義任意放大倍數 支持小數
canvas.width = width * scale; //定義canvas 寬度 * 縮放
canvas.height = height * scale; //定義canvas高度 *縮放
canvas.getContext("2d").scale(scale, scale); //獲取context,設置scale
var opts = {
  scale: scale, // 添加的scale 參數
  canvas: canvas, //自定義 canvas
  // logging: true, //日誌開關，便於查看html2canvas的內部執行流程
  width: width, //dom 原始寬度
  height: height,
  useCORS: true //容許跨域
};

html2canvas(shareContent, opts).then(function (canvas) {
  var context = canvas.getContext('2d');
  // 【重要】關閉抗鋸齒
  context.mozImageSmoothingEnabled = false;
  context.webkitImageSmoothingEnabled = false;
  context.msImageSmoothingEnabled = false;
  context.imageSmoothingEnabled = false;

  var imgURL = canvas.toDataURL("image/png");

  var $img = $('<img src=' + imgURL + '>').css({
    width: canvas.width / scale + 'px',
    height: canvas.height / scale + 'px'
  });

  // 安卓下綁定長按保存圖片事件
  bindLongTouchSave($img);
  
  // 這裏的.btn.save就是長按保存按鈕
  $('.btn.save').append($img);
});
複製代碼

• visibilityChange事件（頁面可見性發生改變時觸發，通常用於頁面切換到後臺中止播放音樂啥的）

visibilityChange(在早期瀏覽器裏須要加瀏覽器前綴)，微信也支持此事件（經過window.hidden判斷當前頁面狀態）；qq中一樣功能的事件是qbrowserVisibilityChange（經過e.hidden判斷當前頁面狀態）

結語

好啦，此次先總結這麼多，之後等遇到了再繼續總結，兼容性問題真的是移動端開發人員的一個大坑哈，O(∩_∩)O哈哈~