electron.js - 浏览器窗口视口大小在调整大小时缩小 1px-解网

问：

我这里有一个无框电子.js窗口（main.js）：

const createWindow = () => {
  const win = new BrowserWindow({
    width: 500,
    height: 400,
    useContentSize: true,
    frame: false,
  })

  win.loadFile('index.html').then();
}

我还创建了一个主要元素，它跨越了整个正文的宽度，其中包括一个可拖动的标题栏：

...
<body>
  <div class="main">
    <div class="titlebar"></div>
  </div>
</body>
...

创建的窗口有阴影，但没有高亮边框，它看起来有点不自然，所以尝试在周围创建一个边框。整个结构的 CSS 如下所示：.main

* {
    box-sizing: border-box;
}

.main {
    width: 100%;
    height: 100%;
    background-color: white;
    border: 1px solid #333;
    overflow: hidden;
    margin: auto;
}

html {
    width: 100vw;
    height: 100vh;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
}

.titlebar {
    width: 100%;
    height: 40px;
    -webkit-app-region: drag;

    background-color: white;
}

最初一切看起来都很好，并且符合预期：

但是，当调整窗口大小时，底部和右侧的边框就会消失：

这里有什么问题？我该如何解决？

javascript html css node.js 电子

electron.js - 浏览器窗口视口大小在调整大小时缩小 1px

electron.js - BrowserWindow viewport size shrinks by 1px when it is resized

评论