禁止网页缩放（PC和移动端）

最新推荐文章于 2024-03-23 22:37:01 发布

秋山澪与折木奉太郎的爱

最新推荐文章于 2024-03-23 22:37:01 发布

阅读量1.5k

点赞数 1

分类专栏： Web杂谈文章标签：网页缩放 js pc 移动端

本文链接：https://blog.csdn.net/weixin_42514162/article/details/111877931

版权

Web杂谈专栏收录该内容

9 篇文章 1 订阅

订阅专栏

把禁止缩放的方式写下来，移动端一大堆，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>

秋山澪与折木奉太郎的爱

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
3
评论
禁止网页缩放（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端原则上不可以禁止，因为，这是对于使用者的权利，但是，缩放会导致一些东西乱掉，所以，可以采用覆盖本来操作的方式，使用Jav
复制链接

扫一扫