Window display position and screen

screen module in electron

https://www.electronjs.org/zh/docs/latest/api/screen

1. screen.getPrimaryDisplay()Returns the main window Display object
2. There are two important properties in the Display object workAreaSize. sizeThe
   former is the size of the work area. It has the same width as the latter. Only the height is different. The height of workAreaSize in the Windows system does not include the height of the taskbar below.

Let the window fill the operating area, rather than strictly being full screen

const {
    
    app,ipcMain,BrowserWindow,screen } = require('electron')
const win = new BrowserWindow({
    
     
    width: screen.getPrimaryDisplay().workAreaSize.width, 
    height: screen.getPrimaryDisplay().workAreaSize.height,
  })
win.loadURL('https://baidu.com')
win.once('ready-to-show', () => {
    
    
  win.show()
})

Can the window be maximized by setting the width and height?

const win = new BrowserWindow({
    
     
    width: screen.getPrimaryDisplay().size.width, 
    height: screen.getPrimaryDisplay().size.height,
  })
  win.loadURL('https://baidu.com')
  win.once('ready-to-show', () => {
    
    
    win.show()
    console.log(screen.getPrimaryDisplay().size) 
    //{ width: 1494, height: 934 }
    console.log(screen.getPrimaryDisplay().workAreaSize)
    //{ width: 1494, height: 894 }
  })

• After running, it is found that the display size is the same as before, but it is obvious that the current height=934, which is higher than the previous height.
• After testing, it was found that even if the width and height are set to a large integer, the maximum display effect will only cover the entire work area.

Maximized realization

 win.once('ready-to-show', () => {
    
    
    win.maximize()
    win.show()
  })

How is this number of width 1494 calculated?

As shown in the picture, you can see that my resolution is 2240x1440 and enlarged by 150%.

View the screen object in the chrome console

You can see that the height and availableHeight of screen in chrome behave the same as the screen module in electron.

You can find the pattern Math.ceil(2240/1.5)=1494
You can get the screen magnification through the window.devicePixelRatio property

The small window is displayed horizontally in the middle and vertically downward

Electron's windows are displayed in the center by default, you only need to adjust the y-axis size of the window

 win.once('ready-to-show',()=>{
    
    
        let bounds = win.getBounds() 
        bounds.y = screen.getPrimaryDisplay().workAreaSize.height-300
        //300为当前窗口本身的高度
        win.setBounds(bounds)
        win.show()
    })

Create a window in an external monitor

The official website has an example of creating a window in an external display.
By screen.getAllDisplays()obtaining all displays,
it is judged based on display.bounds.x and display.bounds.y.