禁止网页缩放(PC和移动端)

把禁止缩放的方式写下来,移动端一大堆,PC当时还是找了半天的。

· 移动端,这个设置缩放的最大和最小倍数都是1.0就可以了
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">


· PC端原则上不可以禁止,因为,这是对于使用者的权利,但是,缩放会导致一些东西乱掉,所以,可以采用覆盖本来操作的方式,使用JavaScript的代码来实现。这个是网上大佬的实现,我菜鸡借用一下,害怕忘了记下来。
<script>
  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 });
</script>



· 两者同时存在的例子
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
<script>
  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 });
</script>
</html>


猜你喜欢

转载自blog.csdn.net/a476613958/article/details/126479014