禁止用户缩放页面

对于移动端，我们可以直接这样限制：

html

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">

对于 PC 端

禁止用户在页面上使用 ctrl+鼠标滚轮 和 ctrl +\-进行页面缩放

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Document</title>
  </head>
  <body>
    测试缩放
  </body>
  <script>
    document.addEventListener(
      "mousewheel",
      function (e) {
        e = e || window.event
        if ((e.wheelDelta && event.ctrlKey) || e.detail) {
          event.preventDefault()
        }
      },
      {
        capture: false,
        passive: false
      }
    )

    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
    )
  </script>
</html>

在 vue 项目中，还原用户的缩放操作（对用户在页面上修改浏览器样式也生效）

在 App.vue 中（最外层父页面）

javascript

mounted () {
  this.keepRatio()
  window.addEventListener('resize', () => {
    this.keepRatio()
  });
}

在 methods 中，加入这样一个方法 keepRatio：

javascript

methods: {
  keepRatio () {
    var ratio = 0;  // 定义一个缩放比例
    var screen = window.screen;  // 获取窗口对象
    var ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;  // 像素大小的比例
    }
    else if (~ua.indexOf('msie')) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    }
    else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
      ratio = window.outerWidth / window.innerWidth;  // 外部比例/内部比例：缩放比例
    }
    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    this.ratio = (ratio / 100).toFixed(2);
    document.body.style.zoom = 1 / this.ratio;  // 窗口视图除以缩放比例：即缩放还原
  }
}