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

相关推荐
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom