HTML 页面禁止缩放功能

Krorainas2025-07-21 21:45
页面禁止缩放

代码如下：
js 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0,  user-scalable=no;">
    <meta name="theme-color" content="#000000">
    <title>页面禁止缩放功能</title>
  </head>
  <!-- 禁止鼠标右键 oncontextmenu="return false"-->
  <body oncontextmenu="return false">
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <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 });
    // 触摸屏禁止手动缩放页面
    document.documentElement.addEventListener('touchstart', (event) => {
      if(event.touches.length > 1) {
        event.preventDefault();
      }
    },{
      passive: false
    }) 
    </script>
  </body>
</html>