如何使用JavaScript检测窗口大小调整

在本文中，我们将介绍如何使用JavaScript来检测和响应窗口大小调整的事件。通过这种方式，您可以优化网页布局以适应不同大小的屏幕和设备。

1. 使用window.onresize事件

JavaScript中的window对象提供了一个onresize事件，可以在窗口大小调整时触发相应的功能。您可以通过将函数分配给window.onresize来利用这个事件。下面是一个简单的示例：

window.onresize = function() {
  console.log("窗口大小已调整");
};

在此示例中，当窗口大小调整时，控制台将输出”窗口大小已调整”。您可以根据需要在此事件处理程序中编写您自己的代码。

2. 获取窗口尺寸

要检测窗口的实际尺寸，您可以使用window.innerWidth和window.innerHeight属性。这些属性分别表示窗口的宽度和高度。下面是一个示例：

window.onresize = function() {
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  console.log("窗口宽度：" + windowWidth);
  console.log("窗口高度：" + windowHeight);
};

在此示例中，当窗口大小调整时，控制台将输出窗口的宽度和高度。您可以根据需要使用这些尺寸调整网页布局。

3. 响应窗口大小调整

除了检测窗口大小，您也可以根据窗口的尺寸变化来执行其他操作。以下是一些常见的示例：

调整元素大小

您可以使用JavaScript来调整页面上的元素大小或位置，以适应不同大小的窗口。以下是一个示例：

window.onresize = function() {
  var windowWidth = window.innerWidth;
  var element = document.getElementById("myElement");

  if (windowWidth < 768) {
    element.style.width = "100px";
  } else {
    element.style.width = "200px";
  }
};

在此示例中，当窗口宽度小于768像素时，myElement的宽度将设置为100像素，否则将设置为200像素。您可以根据需要修改此示例。

显示不同内容

您可以使用JavaScript根据窗口的尺寸变化来动态显示不同的内容。以下是一个示例：

<div id="desktopContent" class="content">
  <!-- 在桌面上显示的内容 -->
</div>

<div id="mobileContent" class="content">
  <!-- 在移动设备上显示的内容 -->
</div>

<script>
window.onresize = function() {
  var windowWidth = window.innerWidth;
  var desktopContent = document.getElementById("desktopContent");
  var mobileContent = document.getElementById("mobileContent");

  if (windowWidth < 768) {
    desktopContent.style.display = "none";
    mobileContent.style.display = "block";
  } else {
    desktopContent.style.display = "block";
    mobileContent.style.display = "none";
  }
};
</script>

在此示例中，当窗口宽度小于768像素时，desktopContent将隐藏，mobileContent将显示，反之亦然。您可以根据需要修改此示例。