本文介绍如何在浏览器窗口大小改变时，自动、实时地调整指定 div 的宽高，无需手动触发按钮，纯通过 javascript 监听 resize 事件实现响应式尺寸适配。
本文介绍如何在浏览器窗口大小改变时，自动、实时地调整指定 div 的宽高，无需手动触发按钮，纯通过 javascript 监听 resize 事件实现响应式尺寸适配。
要实现页面元素（如
）随浏览器窗口缩放而自适应调整尺寸，核心在于监听 window 对象的 resize 事件——该事件会在用户拖拽窗口边缘、切换全屏、或设备横竖屏旋转等场景下自动触发。
以下是一个完整、可直接运行的 jQuery 实现方案：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><div id="main-page">
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-12">
<div id="height" style="color: wheat; font-family: monospace; padding: 12px;"></div>
</div>
</div>
</div>
</div>
<script>
function changeSize() {
const width = $(window).width();
const height = $(window).height();
$("#main-page").css({
width: width + 'px',
height: height + 'px'
});
$("#height").text(`Height: ${height}px | Width: ${width}px`);
}
$(document).ready(function() {
changeSize(); // 初始化尺寸
});
$(window).on("resize", function() {
changeSize(); // 窗口变化时重新计算
});
</script>
✅ 关键要点说明：
- 使用 $(window).width() 和 $(window).height() 获取当前视口尺寸（非 $(this).width()，因 this 在 resize 回调中指向 window，但为避免歧义建议显式书写）；
- 必须在 $(document).ready() 中首次调用 changeSize()，确保页面加载完成即应用初始尺寸；
- resize 事件高频触发，如需性能优化（例如防抖），可在生产环境添加 debounce 处理（如使用 setTimeout 延迟执行）；
- 若需兼容现代原生 JS（无 jQuery），可用 window.addEventListener('resize', ...) 替代，并通过 document.getElementById() 操作 DOM。
⚠️ 注意事项：
- 避免直接修改内联 style 属性以外的布局方式（如 Flex/Grid 容器子项），否则可能引发样式冲突；
- 若 #main-page 含子元素依赖其尺寸渲染（如 Canvas、图表），应在 changeSize() 内同步重绘逻辑；
- 移动端 Safari 等浏览器存在 resize 触发延迟或不触发的问题，此时可结合 orientationchange 事件增强兼容性。
通过上述方法，即可实现真正的“响应式容器”——尺寸与视口完全同步，为全屏布局、仪表盘、画布类应用提供可靠基础。
