如何禁止Electron Browser Window页面的缩放功能？

你之前尝试的方法存在两个核心问题：一是setZoomFactor的参数是缩放倍数（1代表原始大小，2代表放大2倍），并非百分比，传入100完全不符合参数要求；二是仅单次设置缩放因子无法阻止用户通过快捷键、鼠标滚轮或页面自身逻辑触发的缩放操作，需要彻底拦截缩放行为。

针对你加载外部URL的场景，以下是两种有效解决方案：

方案一：主进程中彻底锁定缩放 #

修改createWindow函数，通过配置和事件监听实现全维度缩放禁用：

const { BrowserWindow } = require('electron');

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1500,
    height: 1000,
    minWidth: 1300,
    minHeight: 700,
    icon: "logo.ico", // 注意此处为小写icon，大写Icon可能不生效
    webPreferences: {
      zoomFactor: 1, // 初始缩放设为100%
      nodeIntegration: false, // 加载外部URL建议关闭该选项提升安全性
      contextIsolation: true
    }
  });

  mainWindow.setMenuBarVisibility(false);

  // 拦截系统缩放快捷键（Ctrl/Cmd +/-、Ctrl/Cmd 0）
  mainWindow.webContents.on('before-input-event', (event, input) => {
    const isZoomKey = (input.control || input.meta) && (input.key === '+' || input.key === '-' || input.key === '0');
    if (isZoomKey) {
      event.preventDefault();
    }
  });

  // 监听缩放变化，强制重置为100%
  mainWindow.webContents.on('zoom-changed', (event, zoomDirection) => {
    mainWindow.webContents.setZoomFactor(1);
  });

  mainWindow.loadURL("https://google.com");
};

方案二：渲染进程中锁定缩放 #

若需在渲染进程处理，可在页面加载完成后设置缩放限制并拦截快捷键：

// 渲染进程代码
const { webFrame } = require('electron');

// 锁定缩放因子为1，同时设置最大/最小缩放限制为1
webFrame.setZoomFactor(1);
webFrame.setZoomLimits(1, 1);

// 拦截页面内缩放快捷键
document.addEventListener('keydown', (e) => {
  const isZoomKey = (e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '-' || e.key === '0');
  if (isZoomKey) {
    e.preventDefault();
  }
});

关键注意事项 #

• 加载外部URL时，页面自身可能存在修改缩放的逻辑，因此必须通过zoom-changed事件监听（主进程）或setZoomLimits（渲染进程）强制锁定缩放。
• setZoomFactor的有效参数范围为0.25到5.0，超出范围会被Electron自动修正，之前传入100属于无效操作。
• 主进程的before-input-event拦截比渲染进程的键盘监听更可靠，能覆盖系统级快捷键触发的缩放。

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