Bootstrap

vue2 禁止浏览器、h5端缩放

注意:
页面缩放一般三种方式

1. ctrl +鼠标滚轮
2. ctrl + 键盘 "+"、"-"
3. 鼠标点击浏览器地址栏右侧 缩放按钮

说明:第3种暂时没办法,前两者可以监听到,所以可以通过以下方式禁用前面2中缩放



index.html页面head标签中设置如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />




App.vue中设置如下:
<script>
export default {
  methods: {
    // 禁止缩放(浏览器中)
    forbidZoom() {
      document.addEventListener(
        'keydown',
        function (event) {
          if (
            (event.ctrlKey === true || event.metaKey === true) &&
            (event.keyCode === 61 ||
              event.keyCode === 107 ||
              event.keyCode === 173 ||
              event.keyCode === 109 ||
              event.keyCode === 187 ||
              event.keyCode === 189)
          ) {
            event.preventDefault();
          }
        },
        false
      );

      document.addEventListener(
        'mousewheel',
        function (e) {
          e = e || window.event;
          // @ts-ignore
          if ((e.wheelDelta && event.ctrlKey) || e.detail) {
            event.preventDefault();
          }
        },
        {
          capture: false,
          passive: false
        }
      );
    },

    // 禁止双指放大(手机端)
    forbidZoomClick() {
      document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      }, false);
    },

    // 禁止双击屏幕放大(手机端)
    forbidZoomDoubleClick() {
      var lastTouchEnd = 0;

      document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);
    }
  },

  mounted() {
    this.forbidZoom(); // dom挂载完成后,及禁止浏览器缩放
    this.forbidZoomClick();
    this.forbidZoomDoubleClick();
  }
}
</script>

;