在 NW.JS 中限制 window 纵横比

Question

是否可以在 NW.JS 应用中限制 window 的纵横比？

我有 800 x 600 的内容。在 package.json 清单中，我可以将 window 设置定义为...

"window": {
  "toolbar": false
, "width": 800
, "height": 600
, "min_width": 800
, "min_height": 600
}

我使用 CSS 来保持内容的纵横比并尽可能填充 window:

html, body{
  margin: 0;
  height: 100%;
}

main {
  position: relative;

  width:100vw;
  max-width:133.3333vh; /* max-width / width = aspect ratio */
  min-width: 800px;

  height:75vw;
  max-height:100vh; /* max-height / height = aspect ratio */
  min-height: 600px;

  margin: 0 auto;
}

但是，如果 window 太宽，两边都会出现空白区域。如果你让它的宽度太高，底部会出现一个空白区域。

是否有强制指定纵横比的设置？

或者现在是否有我可以监听的 window resize 事件，以便我可以在 window 的大小更改后立即应用 window.resizeTo(height*1.333,height)？

Answer 1

似乎确实发生了调整大小事件：

您可以使用这样的代码来设置您的事件侦听器：

gui = require('nw.gui');
w = gui.Window.get();
w.on('resize', yourFunctionHere);

但要小心更改处理程序中的 window 大小（例如使用 resizeTo()），因为这会触发调整大小并可能导致各种混乱。使调整大小以当前纵横比为条件可能有效，但我可以想象如果你达到某个限制或其他限制，你仍然运行会遇到问题。顺便说一句，我不知道是否有一些设施（类似于事件冒泡 &c）在这种情况下会有所帮助。

在 NW.JS 中限制 window 纵横比

Constrain window aspect ratio in NW.JS

resize

window

aspect-ratio

node-webkit