如何解决Electron应用在不同分辨率显示器下的窗口尺寸问题

问题场景 #

设备分辨率配置：

• 笔记本电脑：1920 x 1080
• 一号显示器：3840 x 1260
• 二号显示器：2560 x 1440

当前应用尺寸设置：

index.html 中的样式 #

body {
  width: 453px;
  height: 518px;
  resize: none;
}

style.css 中的样式 #

html,
body {
  margin: 0;
  width: 453px;
  height: 518px;
  resize: none;
}

Main.ts 中的窗口配置 #

function createMainWindow(): BrowserWindow {
  win = new BrowserWindow({
    width: 452,
    height: 518,
    center: true,
    frame: false,
    show: false,
    fullscreenable: false,
    resizable: false,
    webPreferences: {
      nodeIntegration: true,
      plugins: true,
      allowRunningInsecureContent: true,
      webSecurity: false,
      contextIsolation: false,
      devTools: isDev()
    },
  });
}

问题表现：应用在笔记本显示器上显示正常，拖拽到二号显示器后窗口尺寸被放大，但应用内容的原始尺寸保持正确。

解决方法 #

1. 强制禁用自动DPI缩放，启用高DPI感知 #

在应用启动阶段（app.whenReady()之前）添加以下代码，强制Electron按物理像素渲染，避免不同显示器的缩放比例影响窗口尺寸：

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

// 启用高DPI支持并强制缩放因子为1
app.commandLine.appendSwitch('high-dpi-support', '1');
app.commandLine.appendSwitch('force-device-scale-factor', '1');

2. 统一窗口尺寸配置 #

当前Main.ts中窗口宽度设置为452px，但HTML/CSS中设置的是453px，尺寸不一致会导致渲染异常。将Main.ts中的窗口宽度修改为453px，保持和前端样式的统一：

win = new BrowserWindow({
  // 修正为和前端一致的尺寸
  width: 453,
  height: 518,
  // 其他配置保持不变...
});

3. 监听显示器切换事件（可选） #

如果需要适配不同显示器的DPI缩放且保持窗口视觉尺寸一致，可以监听显示器变化事件，动态调整窗口尺寸：

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

// 监听显示器参数变化
screen.on('display-metrics-changed', () => {
  if (!win) return;
  // 获取当前窗口所在的显示器
  const currentDisplay = screen.getDisplayMatching(win.getBounds());
  // 获取当前显示器的缩放因子
  const scaleFactor = currentDisplay.scaleFactor;
  // 按视觉尺寸反算物理像素尺寸
  win.setSize(Math.floor(453 / scaleFactor), Math.floor(518 / scaleFactor));
});

问题原因 #

不同显示器的DPI缩放比例不同，Electron默认会根据显示器的缩放比例自动调整窗口大小，但frame: false的无边框窗口由于缺少系统边框的约束，可能导致缩放计算异常，出现窗口尺寸被放大但内容保持原始尺寸的情况。

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