代码之家 › 专栏 › 技术社区 › Colin Cline

车窗右侧的小间隙(车窗过大)

chromium electron css javascript

Colin Cline · 技术社区 · 7 年前

我刚开始用electron制作一个新的应用程序,在我的应用程序中添加了一个新功能后,我发现在窗口的右侧添加了一个很难注意到的白色(或者可能是透明的)间隙。
更多说明:我制作了一个应用程序,从服务器获取一些东西,经过一些操作后,将在主窗口中显示它们。该应用程序只有一个窗口(非常简单的应用程序),这是我添加到主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 说明文字 :当我在中注释“x”和“y”时 main.js 和 css “宽度”的存在,一切似乎都很好。

附笔 :我不认为这个问题只是关于“x”和“y”的问题 主要的js公司 尽管如此,主要问题是:

为什么以及如何使窗口比我们在中设置的窗口大 主要的js公司 并且在 css ?

electron v1.7.11
Windows 10 64位

1 回复 | 直到 7 年前

Colin Cline 7 年前

请注意 :

这并不是一个“永久解决方案”,这只是在electron团队通过以下方式诊断此行为的主要原因之前的临时修补程序 electron.js .
幸亏 @mplungjan 和 @Mike 提醒我再次阅读文档

我试着每时每刻都观察/跟踪“窗口大小”,这样我就可以发现电子核内部的“窗口大小”不准确或没有,在 renderer.js 是否涉及?!

基于此结果(来自 main.js ),其明显变化发生在 主要的js公司 部分

这是 主要的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 显示窗口大小,显然它不准确,因为窗口大小应为“820px”*“520px”。

如何修复此问题 : ( 请考虑以下大部分代码都不是新代码,新的棘手行有注释 )

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());

这个差距已经不存在了。
附笔 :就我个人而言,我不喜欢这种解决方案,因此,如果其他人能够提出更好的解决方案,我会接受它作为答案。