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

相关推荐
wyzqhhhh2 小时前
less和sass
前端·less·sass
Nan_Shu_6143 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel4 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始5 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible5 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫5 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评5 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner5 小时前
【html】canvas实现一个时钟
前端·html
林烈涛6 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99996 小时前
Unocss
开发语言·前端