I've just started playing around with Electron and I'm not quite sure I understand the dimensions of the BrowserWindow object. My current screen resolution is 2880x1800 and yet if I create a BrowserWindow of 1024x768 it nearly fills up the whole screen (see below), while the content is clearly blown up.

As a reference, the blue bar at the top is set by CSS to have only 150px...

mainWindow = new BrowserWindow({
  width: 1024,
  height: 768
});

What exactly is happening and how can I have matching resolutions?

I've just started playing around with Electron and I'm not quite sure I understand the dimensions of the BrowserWindow object. My current screen resolution is 2880x1800 and yet if I create a BrowserWindow of 1024x768 it nearly fills up the whole screen (see below), while the content is clearly blown up.

As a reference, the blue bar at the top is set by CSS to have only 150px...

mainWindow = new BrowserWindow({
  width: 1024,
  height: 768
});

What exactly is happening and how can I have matching resolutions?

• javascript
• node.js
• electron

• 2 Seems like you have a retina display, which has a pixel scale factor of 2.0. Electron window size is "nominal size", which the OS multiples with whatever dpi it has – pergy Commented Dec 18, 2019 at 16:52
• @pergy yep that's it, using the scale factor with the width and height i now get a correct window size in proportions to the screen resolution, however the web content is still doubled in size, is there a way to specify the scale factor of the web content? Looking in devtools i can see that the height of the document is 900px which is exactly half of the resolution of the screen (1800px). – Julien Commented Dec 18, 2019 at 22:29
• managed to get it right using the zoomFactor, i'll post the full answer for future references – Julien Commented Dec 18, 2019 at 22:36

1 Answer 1

Thank's to @pergy's ment pointing out that retina displays have a different pixel scale factor and that Electron uses that in its calculations, I managed to solve the problem by fetching this factor and using it for both deciding the dimensions of the window as well as the zoom factor of the web view.

Here's my solution:

  let factor = screen.getPrimaryDisplay().scaleFactor;

  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1024 / factor,
    height: 768 / factor,
    webPreferences: {
      zoomFactor: 1.0 / factor
    }
  });