跟踪窗口大小 JS - Javascript

在前端开发中，窗口大小的变化对程序的展示和布局都有很大的影响。在这种情况下，我们需要跟踪窗口大小，以便在窗口大小变化时可以动态调整程序的布局。

这里我们将介绍如何使用 JavaScript 跟踪窗口大小。具体而言，我们将使用 window.innerWidth 和 window.innerHeight 属性来获取当前窗口的大小，并使用 window.onresize 方法来侦听窗口大小的变化。下面展示了一个示例代码：

// 获取窗口大小
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

// 输出窗口大小
console.log("Window Width: " + windowWidth);
console.log("Window Height: " + windowHeight);

// 创建侦听器
window.onresize = function(event) {
  // 获取新的窗口大小
  var newWidth = window.innerWidth;
  var newHeight = window.innerHeight;
  
  // 输出窗口大小
  console.log("Window Width: " + newWidth);
  console.log("Window Height: " + newHeight);
};

在上面的代码中，我们首先获取了当前窗口的大小，并输出到控制台上。然后，我们创建了一个 window.onresize 事件处理函数，并在其中获取新的窗口大小，并输出到控制台上。

这个功能可以让前端开发人员在窗口大小变化时进行动态布局和渲染，从而提高用户体验。