如何根据 Electron 窗口中 HTML 元素的宽度调整窗口宽度？

Question

我在 electron 窗口的 HTML 中有一个元素，但不知道这个元素的宽度是多少。如何将创建于 main.js 中的 electron BrowserWindow 的最小宽度设置为该 HTML 元素的宽度？

我尝试在 index.html 文件中使用 element.offsetWidth 获取元素的宽度，然后在同一文件中使用下面的代码来设置窗口的最小大小，但是大小总是有些不对。我不知道为什么。从一些控制台输出信息来看应该可以工作。

var remote = require('electron').remote;
var win = remote.getCurrentWindow();
win.setMinimumSize(elementWidth, 400);

我猜测我的屏幕像素与CSS像素大小不同，但我不确定。是否有更好的方法来解决这个问题，或者我漏掉了什么？

- Aaron Beaudoin

---

它偏差多少？它可能恰好偏差浏览器窗口边框的宽度吗？ - Just a student

没有。它偏差大约26像素。没有浏览器有那么厚的边框。 - Aaron Beaudoin

好的，如果有滚动条，它可能实际上是26像素。有吗？ - Just a student

Answer 1

似乎窗口边框（和滚动条等）没有被考虑在内。您可以通过先设置您想要的大小，然后读取实际大小并将大小更新为您想要的加上检测到的差异来考虑这些因素。

// get elementWidth in some way
var remote = require('electron').remote,
    win = remote.getCurrentWindow();
win.setMinimumSize(elementWidth, 400);
// check size, update window width
var contentWidth = window.innerWidth;
if (contentWidth !== elementWidth) {
  win.setMinimumSize(2 * elementWidth - contentWidth, 400);
}

或者，你可以直接使用 win.setContentSize 方法，这应该可以达到你想要的效果（尽管它显然不强制最小大小...

// get elementWidth in some way
var remote = require('electron').remote,
    win = remote.getCurrentWindow();
win.setContentSize(elementWidth, 400);

- Just a student