移动端常见兼容性问题解决方案

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属性

复制代码

注：x5内核-安卓下不能添加airplay="allow" x5-video-player-fullscreen="true" x-webkit-airplay="allow"（添加了之后playsinline属性就失效了）

x5内核video api：腾讯x5内核api文档中的video部分

• ios下视频无法播放常见原因

1、若视频是MP4格式则必须是h264编码
2、视频资源必须支持分片传输（非分片传输的话在safari中不能播放）

视频文件分片传输参考：nginx文件分片传输配置

其他

• click事件有延迟（原因：客户端浏览器一般双击可放大页面，浏览器在检测到第一次click事件时不会马上触发，一般会等到300ms后无下一次click事件后才会触发click事件）
  解决方案：fastclick

• 微信下长按保存图片（微信下不支持通过为a标签添加download属性直接下载图片）
  解决方案：先用html2canvas将dom绘制在canvas上，然后使用绝对定位将图片放置在某个按钮之上（设置图片opacity：0.01，让图片看不见），然后触发上下文菜单供用户保存图片；

html2canvas使用注意事项：
1、不能够绘制display:none或者通过position移出显示区的dom，但是可以绘制z-index:-1的dom,详见html2canvas踩坑记
2、 图片模糊解决方案：先根据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 = $('').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哈哈~