最近在做 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
