Vue禁止iOS放大镜方框及页面放大缩小

在最近项目中遇到了一个问题： 在ios双击触摸长按出现类似下图的放大镜问题。

解决过程：

一、查阅网上的资料普遍推荐使用

-webkit-user-select:none;
 user-select:none;
 touch-callout:none;
 -webkit-touch-callout:none;

-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示。当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。

但是使用以上方法并不能解决项目需求效果。

查看控制台属性值是无效的。具体为什么我不懂~~~

二、以下也是查阅网上资料所得

1、在 index.html 中添加 meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=0">

2、在 src / app.vue（或public/index.html） 中 script 标签内添加代码。

window.onload = function () {
      /* 对于Safari浏览器来说，无法通过meta属性限制其缩放，可以在App.vue中添加如下代码，实现缩放禁止，主要原理是：禁止两指以上的触摸事件（因为缩放需要两指操作），禁止手势事件的识别 */
      // 阻止双击放大行为
      var lastTouchEnd = 0;
      document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      // 禁止双击出现放大镜 
      document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);

      // 阻止双指进行缩放大行为
      document.addEventListener('gesturestart', function (event) {
        event.preventDefault();
      });
    }

此方法，我认为是直接阻止屏幕双击，从而阻止双击触摸后出现放大镜（文本放大镜）。

但是此方法虽然可以阻止了放大镜的出现，但是还不够彻底，而且会与项目的点击事件，连续点击事件冲突。

所以，此方法还不是最佳方法。需要有大神提供更佳方法~~~

特别说明：每一篇文章，都是针对自己做过的项目而记下的笔记；笔记的内容也是参考网上的资料，我就是个搬运工，整合成了自己的笔记。如需要参考的，请根据自己实际项目需求参考。