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

相关推荐
合作小小程序员小小店14 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask
慧一居士15 小时前
ES6(ECMAScript 2015)功能介绍,使用场景,对应功能点完整使用示例
前端
吃饺子不吃馅15 小时前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
恋猫de小郭15 小时前
第一台 Andriod XR 设备发布,Jetpack Compose XR 有什么不同?对原生开发有何影响?
android·前端·flutter
muyouking1115 小时前
Tailwind CSS 小白快速入门速查手册
前端·css·css3
社恐的下水道蟑螂15 小时前
用 n8n 打造 AI 科技新闻速览工作流:自动化获取、总结,每天高效充电
前端
陈随易15 小时前
PaddleOCR-VL可太强了,图片识别转文字的巅峰之作
前端·后端·程序员
盗德15 小时前
紧急项目下,前端是“先乱炖”还是“慢火煲汤”?我选第三条路
前端·程序员
zmirror15 小时前
Monorepo单仓多包&独立部署
前端
Linsk15 小时前
为什么BigInt无法通过Babel降级?
前端·typescript·前端工程化