Question

我刚开始用电子制作一个新的应用程序并在我的应用程序中添加新功能后发现，在窗口的右侧非常难以注意到白色（或可能是透明的）间隙。
更多解释：我创建了一个从服务器获取内容的应用程序，经过一些操作后，将在主窗口中显示它们。该应用程序只有一个窗口（它非常简单的应用程序），这是我添加到主js“之前”差距的窗口配置：

mainWindow = new BrowserWindow({
    show      : false,
    width     : 820,
    height    : 520,
    frame     : false,
    resizable : false,
    title     : "blah blah blah"
})

之后我决定扩展应用程序并缓存窗口的最后位置，然后用户尝试关闭窗口，以便下次用户打开应用程序时，窗口将处于同一个位置。所以我添加了一些额外的函数来捕获窗口“x”和“y”并将它们保存到“appData”中的“json”文件中。我将窗口配置改为这个：

mainWindow = new BrowserWindow({
    show      : false,
    width     : 820,
    height    : 520,
    frame     : false,
    resizable : false,
    title     : "blah blah blah",
    x         : {get x from storage},//this is pseudo 
    y         : {get y from storage}//this is pseudo 
})

现在右侧出现一个小间隙，如下图所示。图片标题中有更多解释。

HTML ：

<body>
    <div class="hello-rob">
        <div class="nav"></div>
    </div>
</body>

CSS ：

body,
html {
    position: relative;
    width: 820px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
}

x_y_and_css_and_gap 标题：Css宽度设置为“820px”，与main. js中的窗口“宽度”相同，因为您可以看到几乎有“2-3px”的白色间隙（我用圆圈标记）

comment_css_width 标题：如果我评论css宽度，那么窗口将扩展到其实际宽度“ 822.4px ”

x_y_comment 标题：当我在main.js和css“宽度”存在时评论“x”和“y”时，每件事情似乎都很好。

P.S ：我不认为这个问题只是在main.js中设置的“x”和“y”，而不管主要问题是什么：

窗口为何以及如何比我们在main.js和css中设置的窗口更大？

electron v1.7.11
Windows 10 64位

Answer 1

请注意：

这不是一个永久的解决方案＆＃34;，这只是一个临时的修补程序，然后电子团队才能通过electron.js诊断出这种行为的主要原因。
感谢@mplungjan和@Mike提醒我再次阅读文档

我试图观察/追踪＆＃34;窗口大小＆＃34;在每一刻，我都可以找到电子核心内部的窗口大小＆＃34;是不准确还是没有，renderer.js中有什么内容？！

根据此结果（来自main.js），其明显的变化发生在main.js部分。

这是main.js控制台（当明显存在额外差距时）：

[ 823, 522 ]// console.log(mainWindow.getSize());
[ 822, 521 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 101, width: 823, height: 522 }// console.log(mainWindow.getBounds());

从结果中你可以看到电子使用setSize，getSize来展示窗口大小，显然它不准确，因为窗口的大小应该是＆＃34; 820px＆＃34; *＆＃34; 520px＆＃34;。

如何解决此问题 :( 请考虑以下代码的大部分内容并非新的，新的棘手行有评论）

function createWindow(){
    mainWindow = new BrowserWindow({
        show      : false,
        width     : 820,
        height    : 520,
        frame     : false,
        resizable : false,
        title     : "blah blah blah",
        x         : {get x from storage},//this is pseudo 
        y         : {get y from storage}//this is pseudo 
        minWidth: 820,// new
        maxWidth: 820,// new
        minHeight: 520,// new
        maxHeight: 520// new
    })

    // in this function i called console.log()
    mainWindow.once('ready-to-show', () => {
        mainWindow.show();
        mainWindow.setSize(820,520);// new (i didn't checked but maybe before `mainWindow.show();` is better to place this line of code)
    })
}


app.on('ready', () => {
    createWindow()
})

另一项检查变化影响的测试：

[ 820, 520 ]// console.log(mainWindow.getSize());
[ 820, 520 ]// console.log(mainWindow.getContentSize());
{ x: 680, y: 100, width: 820, height: 520 }// console.log(mainWindow.getBounds());

差距不再存在 P.S ：我个人不喜欢这种解决方案，所以如果其他人能够代表更好的解决方案，我会接受它作为答案。

窗户右侧的小间隙（窗户超大）

1 个答案: