viewport meta标签maximum-scale失效，Chrome仍可缩放如何修复？

你设置了包含user-scalable=no、maximum-scale=1等属性的viewport标签，但Chrome桌面端仍可通过鼠标滚轮或快捷键缩放视口，这是因为viewport的缩放限制仅针对移动设备设计，Chrome桌面端默认忽略这些规则，它允许用户通过系统级操作调整页面缩放比例。

以下是针对桌面端Chrome的解决办法：

方法：通过JavaScript阻止缩放触发操作 #

通过监听滚轮事件和键盘快捷键事件，直接阻止用户触发缩放的行为：

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
    />
    <style>
      * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
      }

      #container {
        width: 100vw;
        height: 100vh;
        background: #f7f7f7;
      }

      #header {
        width: 100%;
        height: 60px;
        background: #d1d1d1;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="header"></div>
    </div>
    <script>
      // 阻止Ctrl/Command + 滚轮触发的缩放
      window.addEventListener('wheel', function(e) {
        if (e.ctrlKey || e.metaKey) {
          e.preventDefault();
        }
      }, { passive: false });

      // 阻止Ctrl/Command + +/-/0 的缩放快捷键
      window.addEventListener('keydown', function(e) {
        const isScaleKey = ['+', '-', '0'].includes(e.key);
        if ((e.ctrlKey || e.metaKey) && isScaleKey) {
          e.preventDefault();
        }
      });
    </script>
  </body>
</html>

说明 #

• 这段代码会拦截Ctrl/Command + 滚轮的缩放操作，以及Ctrl/Command + +/-/0的缩放快捷键。
• passive: false是必须的，确保可以调用preventDefault()阻止默认行为。
• 移动端的缩放限制仍由viewport标签生效，无需额外修改。

内容的提问来源于stack exchange，提问作者Hongjin