Electron 如何创建与画布大小相同的电子窗口？

我正在和Phaser 3做一个游戏。
它在页面中心创建一个画布，并在其中显示游戏屏幕

在电子窗口中显示画布。
当时，我希望在不放大或缩小的情况下显示画布

画布大小为宽：800像素，高：600像素

因此，我编写了以下代码：。

函数createWindow（）{
//创建浏览器窗口。
win=新浏览器窗口({
宽度：800，
身高：600，
可调整大小：false，
网络首选项：{
//使用pluginOptions.nodeIntegration，别管它
//有关更多信息，请参阅nklayman.github.io/vue cli插件electron builder/guide/security.html#node integration
节点集成：（process.env.ELECTRON_NODE_INTEGRATION为未知）为布尔值，
preload:path.join（uu dirname，'preload.js'），
},
});

将出现以下窗口

橙色部分是画布

当我检查开发工具时，宽度：800像素，高度：600像素是正确的

然而，这张照片的宽度是777像素，高度是604像素

该值不同于我在创建电子窗口时指定的宽度：800 px，高度：600 px

因此，将显示滚动条

为什么Electron生成的窗口小于我在创建它们时指定的大小

有人知道为什么会这样吗

如何将大小设置为宽度：800像素，高度：600像素

---

Electron的版本是9.2.1。

您需要将

useContentSize

属性设置为

true

添加到

new BrowserWindow（）的选项中：

请参见以下内容的
选项
：

useContentSize
Boolean（可选）

width和

height

将 用作网页的大小，这意味着实际窗口的大小将 包括窗框的大小并稍微大一点。默认值为

false

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    resizable: false,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
      preload: path.join(__dirname, 'preload.js'),
    },
  });