ios 与 安卓 移动端浏览器兼容笔记

1.fixed 定位问题

在安卓中使用fixed定位正常

但是在ios中下滑页面时 fixed定位的不动 停留在原地

2.active hover 在安卓正常触发 在ios 无法触发问题

解决：

在 iOS 里有一组双指手势操作的事件：gesturestart、gesturechange、gestureend
main. js 里全局里加入下面的事件监听：

document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
});

3.vue-drag-resize 拖拽插件拖拽后 复位问题

图片拖拽缩放后 设置复位时 需要点击两次复位按钮才可以复位 研究很久 感觉是插件自身bug

解决 在点击复位事件里 让dom的key加一 使其渲染一个新的dom 出现在原始位置

4.vue 二维码生成qrcode插件问题

生成的二维码 在安卓以及ios中定位不同 ios 正常 安卓定位不正常

在检查排查问题时发现 在移动端 qrcode生成的是img 而ios生成的二维码为canvas  导致定位有偏差  查看其源码 发现在canvas不支持时可设置 useSVG属性为true即可生成svg图  之后使用svg显示两个端正常 

  new QRCode(this.$refs.qrCodeDiv, {
        useSVG: true,
        text:  this.QrContent,
        width: 200,
        height: 200,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });