在调整大小时获取窗口大小 - Javascript

在开发Web应用程序时，我们经常需要获取当前窗口的大小，以便使页面更好地适应不同的屏幕大小和设备类型。本文将介绍如何使用Javascript在调整浏览器窗口大小时获取窗口大小。

使用window.innerWidth和window.innerHeight

Javascript提供了window对象，该对象代表当前浏览器窗口。我们可以使用window.innerWidth和window.innerHeight属性来获取窗口的宽度和高度。

window.addEventListener("resize", function(){
  var width = window.innerWidth;
  var height = window.innerHeight;
  console.log("Window size: " + width + " x " + height);
});

上述代码中，我们向window对象添加了一个resize事件监听器。当浏览器窗口的大小发生变化时，该监听器将获取并输出当前窗口的尺寸。

使用document.documentElement.clientWidth和document.documentElement.clientHeight

除了window.innerWidth和window.innerHeight外，我们还可以使用document.documentElement.clientWidth和document.documentElement.clientHeight属性来获取窗口的宽度和高度。这两个属性在大多数情况下与window.innerWidth和window.innerHeight相同，但在某些情况下可能存在微小的差异。

window.addEventListener("resize", function(){
  var width = document.documentElement.clientWidth;
  var height = document.documentElement.clientHeight;
  console.log("Window size: " + width + " x " + height);
});

上述代码中，我们向window对象添加了一个resize事件监听器。当窗口大小发生变化时，该监听器将获取并输出当前窗口的尺寸。

结论

在调整大小时获取窗口大小是Web开发的重要方面之一。我们可以使用Javascript的window.innerWidth和window.innerHeight属性或document.documentElement.clientWidth和document.documentElement.clientHeight属性来获取当前窗口的尺寸。无论哪种方法，都可以让我们更好地适应各种屏幕大小和设备类型。