electron windows 无边框窗口最大化时的隐藏边框问题

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

相关推荐
伍哥的传说4 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091911 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding12 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜13 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD14 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding15 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子81628 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴3 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python