窗口显示位置和screen

文章目录

electron中screen模块

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

screen.getPrimaryDisplay()返回主窗口Display对象
Display对象中有两个比较重要的属性workAreaSize和size,
前者是工作区域的大小,他和后者的width一样,只有height不一样,windows系统中workAreaSize的高度不包含下面任务栏的高度

让窗口铺满操作区域，而不是严格意义上的全屏

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()
})

能否通过设置width和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 }
  })

运行后发现显示大小和之前一样,但明显当前height=934,比之前的height高
经过测试发现即使给width和height设置一个很大的整数,最大显示效果也只是铺满整个工作区域

最大化的实现

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

这个宽度1494的数字是如何计算出来的?

如图,可以看到我的分辨率2240x1440,并放大了150%

在chrome控制台查看screen对象

在这里插入图片描述
可以看到chrome中screen的height和availHeight与electron中的screen模块表现一致

可以发现规律 Math.ceil(2240/1.5)=1494
通过window.devicePixelRatio 属性可以获取屏幕放大倍数

小窗口水平居中垂直靠下显示

electron的窗口默认都是居中显示的,只需要调整其窗口y轴大小

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

在外部显示器中创建窗口

官网有一个外部显示器中创建窗口的例子
通过screen.getAllDisplays()获取所有显示器,
根据display.bounds.x , display.bounds.y 进行判断