Electron开发环境元素缩放异常，生产构建正常（macOS专属）

这是Mac Retina高DPI屏幕下Electron开发模式的缩放适配问题。Electron React Boilerplate的开发环境默认配置未正确处理设备像素比（DPR），而生产构建的打包流程会自动适配高DPI，因此生产包显示正常；Windows无问题则是因为其开发环境的高DPI适配逻辑与Mac不同。

提供三种可行的修复方式，按需选择：

1. 强制设置窗口高DPI适配（main.ts） #

在创建BrowserWindow时，直接指定设备缩放因子为屏幕默认值：

import { BrowserWindow, screen } from 'electron';
// ...
const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false,
    // 强制匹配屏幕缩放因子
    deviceScaleFactor: screen.getPrimaryDisplay().scaleFactor
  },
  enableRetinaDisplay: true
});

2. 修改启动脚本（package.json） #

在开发启动命令中添加强制缩放参数，直接指定缩放因子（Mac Retina屏通常为2）：

"scripts": {
  "start": "electron . --force-device-scale-factor=2",
  "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
  // 其他脚本保留原样
}

3. React端动态适配（开发环境专属） #

在React入口文件中针对开发环境添加缩放调整：

// src/index.tsx
if (process.env.NODE_ENV === 'development') {
  const dpr = window.devicePixelRatio;
  document.body.style.cssText = `
    transform: scale(${dpr});
    transform-origin: top left;
    width: ${100 / dpr}%;
    height: ${100 / dpr}%;
    overflow: hidden;
  `;
}

修改后重启开发服务，检查Mac开发环境下的元素显示是否恢复正常。生产构建无需改动，原有配置可正常适配高DPI。

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