如何在屏幕尺寸变化时自动调整div尺寸（无需按钮或组件）

原代码存在的问题 #

• 尺寸变量在$(document).ready()外部定义，此时$(this)并非指向window，无法获取正确的窗口尺寸
• 仅在页面加载完成时执行一次尺寸设置，未监听窗口大小变化事件，窗口尺寸改变时div不会同步更新

修正方案 #

要实现窗口尺寸变化时同步调整#main-page的尺寸，需要监听window的resize事件，并在事件触发时重新计算并设置div尺寸。同时可以加入防抖优化，避免事件频繁触发导致性能问题。

基础实现代码

$(document).ready(function() {
  // 定义调整尺寸的核心函数
  function adjustMainPageSize() {
    const windowWidth = $(window).width();
    const windowHeight = $(window).height();
    $("#main-page").width(windowWidth).height(windowHeight);
    // 可选：将当前尺寸显示到#height元素中
    $("#height").text(`当前窗口宽：${windowWidth}px，高：${windowHeight}px`);
  }

  // 页面初始化时先执行一次，确保初始尺寸正确
  adjustMainPageSize();

  // 监听窗口resize事件，同步调整尺寸
  $(window).on("resize", adjustMainPageSize);
});

防抖优化版本（推荐）

由于resize事件会在窗口调整过程中频繁触发，加入防抖函数可以减少函数执行次数，提升性能：

$(document).ready(function() {
  // 防抖工具函数：延迟执行目标函数，避免频繁触发
  function debounce(func, delay = 100) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    };
  }

  function adjustMainPageSize() {
    const windowWidth = $(window).width();
    const windowHeight = $(window).height();
    $("#main-page").width(windowWidth).height(windowHeight);
    $("#height").text(`当前窗口宽：${windowWidth}px，高：${windowHeight}px`);
  }

  // 用防抖函数包装尺寸调整函数
  const debouncedAdjust = debounce(adjustMainPageSize);

  adjustMainPageSize();
  $(window).on("resize", debouncedAdjust);
});

CSS补充说明 #

为确保尺寸设置完全生效，建议给#main-page添加如下CSS样式，避免默认边距或盒模型影响实际尺寸：

#main-page {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Emir Güner