前端开发 PC Web端如何禁止用户缩放页面

最新推荐文章于 2024-06-03 14:22:35 发布

Can2Code

最新推荐文章于 2024-06-03 14:22:35 发布

阅读量1.1k

点赞数 9

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_36722315/article/details/136674217

版权

开发的页面不想让用户缩放页面，这样的页面可能涉及很多绝对相对定位。

页面缩放一般三种方式

ctrl +鼠标滚轮
ctrl ＋键盘 "+"、"-"

第三种暂时没办法

前两者可以监测到，那就能禁止

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
      }
    );

把这段代码贴在你页面加载完成的生命周期里，等待着奇迹发生吧