Electron页面内容尺寸不一致求助：跳转后内容放大

1. 强制固定页面缩放因子 #

Electron可能因页面默认缩放或系统DPI适配差异导致显示异常，可在窗口创建时或页面加载后强制设置缩放级别为1.0：

// 创建register窗口时配置缩放因子
const registerWindow = new BrowserWindow({
  useContentSize:true,
  width: 700,
  height: 700,
  minWidth: 700,
  minHeight: 700,
  frame: false,
  webPreferences: {
    zoomFactor: 1.0 // 强制缩放比例为1.0
  }
});

// 或者在页面加载完成后设置
registerWindow.webContents.on('did-finish-load', () => {
  registerWindow.webContents.setZoomFactor(1.0);
});

2. 禁用自动缩放适配 #

系统DPI设置可能触发Electron自动调整页面缩放，可通过webPreferences禁用该特性：

const registerWindow = new BrowserWindow({
  useContentSize:true,
  width: 700,
  height: 700,
  minWidth: 700,
  minHeight: 700,
  frame: false,
  webPreferences: {
    forceDeviceScaleFactor: 1, // 强制设备缩放因子为1
    disableBlinkFeatures: 'AutoZoom' // 禁用自动缩放功能
  }
});

3. 检查页面viewport元标签 #

即使禁用CSS，viewport设置仍会影响页面显示，确保register.html中添加标准viewport标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个标签会固定初始缩放比例，禁止用户手动缩放，避免Electron自动调整。

4. 清除页面缓存 #

页面缓存可能导致渲染异常，加载register.html前可清除窗口缓存：

registerWindow.webContents.session.clearCache().then(() => {
  registerWindow.loadFile('register.html');
});

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