Electron应用CSS像素与设备像素不一致的解决方法？

Question

eletron项目 css的像素与真实像素不一致 css是1600 真实像素是1920 大约是1:1.2的关系 有什么办法同步像素吗？

// 创建主窗口
function createWindow () {
  const primaryDisplay = screen.getPrimaryDisplay();
  const { width, height } = primaryDisplay.workAreaSize;

  // 获取设备的缩放因子
  const scaleFactor = primaryDisplay.scaleFactor || 1;  // 默认为 1

  // 计算 CSS 像素大小
  const winWidth = width;  // 保持 CSS 像素大小
  const winHeight = height;

  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: winWidth,  // 使用 CSS 像素作为基础
    height: winHeight,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
      zoomFactor: 1.0,  // 确保没有额外的缩放
    }
  });

  win.maximize();  // 最大化窗口
  win.loadURL('http://localhost:8000');  // 加载应用程序（假设是本地服务）

  const template = [
    {
      label: '视图',
      submenu: [
        { role: 'toggledevtools', label: '切换开发者工具' },
        {
          label: '刷新',
          accelerator: 'F5',
          click: () => win.webContents.reloadIgnoringCache()
        },
      ]
    }
  ];

  const menu = Menu.buildFromTemplate(template);
  Menu.setApplicationMenu(menu);
}

// 启动应用并创建窗口
app.whenReady().then(() => {
  // 强制启用高 DPI 支持
  app.commandLine.appendSwitch('high-dpi-support', '1');
  app.commandLine.appendSwitch('force-device-scale-factor', '1.0'); // 确保缩放因子为 1.0
  createWindow();
});

// 在窗口被关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// 在 macOS 上，应用程序通常在没有打开窗口时保持活动状态
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

尝试这样写过 但是后面打印出来 scaleFactor是1

怎么样才能同步像素呢

Answer 1

通过 Electron提供的 zoomFactor 以及 计算屏幕的真实尺寸来实现像素同步。

const { app, BrowserWindow, screen } = require('electron');
const path = require('path');

function createWindow() {
  const primaryDisplay = screen.getPrimaryDisplay();
  const { width, height, scaleFactor } = primaryDisplay; // 获取屏幕信息

  // 计算缩放因子，保证CSS像素和真实像素一致
  const zoomRatio = width / screen.getPrimaryDisplay().size.width;

  const win = new BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
      zoomFactor: zoomRatio, // 自动计算缩放比例
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    }
  });

  win.loadURL('http://localhost:8000');
  win.maximize();
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});