最近在做 pc 小黑盒 开发时碰到一个最大化窗口与实际内容不匹配的问题 ,electron 应用在开启最大化时,实际窗口内容会变小,导致边缘 ui 被隐藏
比如目前是非全屏下的 ui 展示

可以看到底部按钮 fixed 在 底部,下面有个 12px 的 padding
但是当点击 右上角的 矩形 去窗口最大化时,会发现底部的 padding 被挤出去了

这里画一个框架图,其实小黑盒 pc 的窗口就是一个 mainWindow + 多个 webview 的形式

其中,mainWindow
有个 sidebar
可以控制里面的 webview
的切换展示,所以我们只需要看 mainWindow
的宽高就可以,mainWindow
的宽高就代表着实际展示区域,最大化时为 2196px X 1188px
我们来看下实际上 electron 在 new WebContentsView
时如何设置的区域范围

设置区域范围通过 setBounds
实现的,那么我们看下 getWebViewBounds
是如何设置宽高的

可以看到,这里的宽高表示的就是 webview
的区域范围,刚刚我们看到的实际内容区域应该是 mainWindowBounds
的宽高
因此,我们直接把 mainWindowBounds
的宽高在最大化时 log
出来进行比较即可

你会发现为何 electron 以为的宽高是 2209px X 1201px
,而实际上宽高范围确实 2196px X 1188px
,宽高均少了 14px
左右,和 ui 上少掉的 12px
也差不多刚好对应上了,这是为啥
起初以为是自己在 new BrowserWindow
时没有添加 frame: false
的配置项,这样就会有个窗口边框的影响?其实不是的,就算真这样,那么小窗肯定也会有影响
实际上这种最大化时实际区域变小的行为是 windows
在窗口最大化时故意保留不可见的 调整边框,这可以允许用户通过拖拽一个看不到的边框来调整窗口大小
如何解决这个问题
很简答,electron 的 screen
模块刚好有个检测实际工作区域范围的 api
screen.getPrimaryDisplay()
因此我们可以判断最大化时调用这个 api 去 setBounds
