how to adjust height and width of an app according to screen resolution

Question

I need to simplify electron display of an app where the app will shrink its size if the display is smaller for example Laptop display or Big size display like iMac. If the app is running on a laptop the size should be smaller than the actual size of an app. I tried ZoomFactor from webPreference API but It's not working as I expected.

Any help would be appreciated, thanks in advance.

Answer 1

After creating your BrowserWindow you should call maximize()

mainWindow1 = new BrowserWindow();
mainWindow1.loadFile(htmlPath);
mainWindow1.maximize();

https://electronjs.org/docs/api/browser-window#winmaximize

Taken from - How to make window size responsive in Electron. (On the opening of the app)

Answer 2

For your use case (if I understand it), you can use screen to determine the size of the screen at launch and then size the window appropriately.

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

let win
app.whenReady().then(() => {
  const { width, height } = screen.getPrimaryDisplay().workAreaSize
  win = new BrowserWindow({ width, height })
  win.loadURL('https://github.com')
})

Answer 3

I think you can get the screen size first using the electron screen module, First, import the electron screen module:

import {screen} from 'electron'

Then on app.on ('ready') get the work area size of the screen:

app.on('ready', async() => {
    primaryDisplay = screen.getPrimaryDisplay()
    console.log(primaryDisplay);
    let screenDimention = primaryDisplay.workAreaSize
    width = screenDimention.width
    height = screenDimention.height

    // I count my on scaleFactor here based on full HD 1920 because by default I designed my webContent on 1920 x 1080 (You can replace on your own)
    scaleFactor = 1 / (1920 / width);
    createWindow().finally(() => {
        console.log("#[Main Window] Created By 'onReady'");
        console.log("-------------------------------------------------------");
    });
})

Should note here that we actually could use

    primaryDisplay = screen.getPrimaryDisplay().scaleFactor

but based on my experience, this scale factor is not that correct especially for MacBook, and I could not get a custom scale factor for my default resolution 1920 x 1080, so I decide to count my own scale factor above.

The last step then you can set the zoom before show your main window like this:

        mainWindow.webContents.setZoomFactor(scaleFactor);

Complete example code shown below:

async function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 1920,
        height: 1080,
        show: false,
        maximizable: true,
        // eslint-disable-next-line no-undef
        icon: path.join(__static, 'test.ico'),
        title: "Test",

        webPreferences: {
            nodeIntegration: true,
            nodeIntegrationInWorker: true,
            devTools: isDevelopment,
            // enableRemoteModule: true,
            nativeWindowOpen: true,
            contextIsolation: false
        },
    })

    // Need to enable this one in electron>15.0
    // require("@electron/remote/main").enable(mainWindow.webContents);

    mainWindow.once("ready-to-show", () => {
        createTray()
        if (!isDevelopment) {
            //mainWindow.setAlwaysOnTop(true);
            mainWindow.setFullScreen(true);
            mainWindow.removeMenu();
            mainWindow.maximize();


        } else {
            mainWindow.maximize();
            mainWindow.setFullScreen(true);
            mainWindow.removeMenu();
            mainWindow.webContents.openDevTools();
        }

        //Adjust zoom factor according to DPI or scale factor that we determined before
        console.log("Display with current scale factor: %o", scaleFactor);
        mainWindow.webContents.setZoomFactor(scaleFactor);
        mainWindow.show()

    });

If you need to shrink your window size based on screen size, then you could replace width and height like this:

        /// 460 and 640 is your window size, it is totally up to you
             width: parseInt(460 * scaleFactor)
            height: parseInt(640 * scaleFactor)

Note that we should use parseInt, because width and height will not work for floating numbers.

This method works for me and it will try to show my original web content on 1920x1080 even on different screen resolutions like MacBook or fullHD windows with different scaling sizes or DPI. Hope it helps!