electron.js - BrowserWindow视口大小在调整大小时缩小1 px

mccptt67 于 2023-11-15 发布在 Electron

关注(0)|答案(1)|浏览(254)

我在这里有一个无框架的electron.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>
...

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

* {
    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;
}

型
最初一切看起来都很好，正如预期的那样：