JQuery $(window).height() 在窗口最大化然后恢复到原始大小后不正确

Question

我有一个使用窗口高度来设置 bootstrapTable 高度的函数。 此外，如果调整窗口大小，我将使用调整大小事件侦听器来更改表格的高度。

这是 Windows 机器上的一个电子项目。

这是单击按钮时触发的代码的第一部分：

  var $table = $("#results-table");
  var $availableHeight =
    $(window).height() -
    $("#results-header").outerHeight(true) -
    $("#search-section").outerHeight(true) -
    50;

  $table
  .bootstrapTable("destroy")
  .bootstrapTable({ data: data, height: $availableHeight });

如果我将窗口高度记录到控制台，我会得到正确的窗口高度 835px，并且表格的大小符合我的预期。

这与窗口调整大小事件监听器中的代码相同：

window.addEventListener("resize", function (event) {
  var $table = $("#results-table");
  var $tableData = $table.bootstrapTable("getData");
  var $availableHeight =
    $(window).height() -
    $("#results-header").outerHeight(true) -
    $("#search-section").outerHeight(true) -
    50;

  $table
    .bootstrapTable("destroy")
    .bootstrapTable({ data: $tableData, height: $availableHeight });
});

如果我最大化窗口，表格大小会正确调整。 不幸的是，当我将窗口恢复到其原始大小（通过再次单击最小/最大按钮）并记录窗口高度以进行控制台时，它现在显示为 818px，即使窗口大小实际上并未更改（它的高度仍然为 835px） ）。 这导致我的桌子比原来的要短一些。

我一直无法弄清楚为什么会发生这种情况。

Answer 1

尝试这些方法：

1. 去抖动调整大小：

   let resizeTimeout;
   window.addEventListener("resize", () => {
     clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(resizeTable, 100);
   });
   
   function resizeTable() {
     // Your table resizing code here
   }
   

2. 使用

   document.documentElement.clientHeight

   代替

   $(window).height()

   来实现稳定的高度测量。

3. Electron 调整大小解决方法：使用 Electron 的

   BrowserWindow

   API 在调整大小时获取准确的尺寸。