阻止页面被放大缩小

爱吃猪蹄_

已于 2023-05-23 15:01:01 修改

阅读量259

点赞数

分类专栏：开发常用文章标签： javascript

于 2023-05-23 14:56:40 首次发布

本文链接：https://blog.csdn.net/Xue_BT/article/details/130827357

版权

开发常用专栏收录该内容

18 篇文章 1 订阅

订阅专栏

这段代码主要用于在网页中处理设备的屏幕适配，特别是针对PC和移动设备。它引入了Vue.js库，定义了handleScreen函数来调整body的zoom属性，detectZoom函数用于检测设备的像素比。此外，adaptive函数判断设备类型并添加相应CSS类，stopZoom函数则阻止了键盘和鼠标滚轮的缩放操作。

摘要由CSDN通过智能技术生成

将以下代码写入js文件，引入页面即可

import Vue from 'vue'
function handleScreen() {
  const m = detectZoom();
  // document.body.style.zoom = 100 / Number(m);
  document.body.style.zoom = 1;
}
function detectZoom() {
  let ratio = 0,
  screen = window.screen,
  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);
  }
return ratio;
}
function adaptive() {
  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    Vue.prototype.isPc = false;
  } else {
    Vue.prototype.isPc = true;
  }
  if (Vue.prototype.isPc) {
    handleScreen();
    document.body.setAttribute("class", "isPc")
  } else {
    document.body.setAttribute("class", "isMobile")
  }
}
function stopZoom() {
  const keyCodeMap = {
    // 91: true, // command
    61: true,
    107: true, // 数字键盘 +
    109: true, // 数字键盘 -
    173: true, // 火狐 - 号
    187: true, // +
    189: true, // -
  };
  // 覆盖ctrl||command + ‘+’/‘-’
  document.onkeydown = function (event) {
    const e = event || window.event;
    const ctrlKey = e.ctrlKey || e.metaKey;
    if (ctrlKey && keyCodeMap[e.keyCode]) {
     e.preventDefault();
    } else if (e.detail) { // Firefox
      event.returnValue = false;
    }
  };
  // 覆盖鼠标滑动
  document.body.addEventListener('wheel', (e) => {
    if (e.ctrlKey) {
      if (e.deltaY < 0) {
      e.preventDefault();
      return false;
      }
      if (e.deltaY > 0) {
        e.preventDefault();
        return false;
      }
    }
  }, { passive: false });
}
// adaptive()
handleScreen()
stopZoom()
// window.onresize = function () {
//     adaptive()
// }