在前端开发中，我们经常需要获取屏幕的宽度和高度，比如实现响应式布局调整、动态计算元素位置、适配不同设备的显示效果等场景，都需要用到屏幕尺寸相关的数据。同时，当用户调整浏览器窗口大小时，我们还需要实时获取最新的尺寸数据来更新页面状态。
获取屏幕宽高的常用属性
JavaScript提供了多个属性来获取不同维度的宽度和高度，我们需要先明确这些属性的区别：
- screen.width / screen.height：返回用户整个屏幕的宽度和高度，也就是显示器的分辨率尺寸，不会因为浏览器窗口大小变化而改变。
- window.innerWidth / window.innerHeight：返回浏览器窗口内部的可视区域宽度和高度，包含滚动条的尺寸，窗口大小变化时会实时更新。
- document.documentElement.clientWidth / document.documentElement.clientHeight：返回文档根元素的可视区域宽度和高度，不包含滚动条，是很多响应式布局中常用的属性。
基础获取屏幕宽高的示例
我们可以直接通过属性读取来获取当前的宽高数据，以下是简单的示例代码：
// 获取整个屏幕的分辨率宽高
const screenWidth = screen.width;
const screenHeight = screen.height;
console.log("屏幕分辨率宽度：" + screenWidth + "，高度：" + screenHeight);
// 获取浏览器窗口可视区域宽高（包含滚动条）
const windowInnerWidth = window.innerWidth;
const windowInnerHeight = window.innerHeight;
console.log("窗口可视宽度（含滚动条）：" + windowInnerWidth + "，高度：" + windowInnerHeight);
// 获取文档根元素可视区域宽高（不含滚动条）
const docClientWidth = document.documentElement.clientWidth;
const docClientHeight = document.documentElement.clientHeight;
console.log("文档可视宽度（不含滚动条）：" + docClientWidth + "，高度：" + docClientHeight);
实时监测屏幕尺寸变化
如果用户调整了浏览器窗口的大小，我们需要实时获取最新的尺寸数据，这时候可以监听resize事件，该事件会在窗口尺寸发生变化时触发。
基础resize事件监听示例
以下是监听窗口尺寸变化并实时输出宽高的代码：
// 定义获取并输出当前宽高的函数
function updateScreenSize() {
const currentWidth = document.documentElement.clientWidth;
const currentHeight = document.documentElement.clientHeight;
console.log("当前文档可视宽度：" + currentWidth + "，当前文档可视高度：" + currentHeight);
// 这里可以添加更新页面元素的逻辑，比如调整某个容器的尺寸
// const container = document.getElementById("container");
// container.style.width = currentWidth * 0.8 + "px";
}
// 初始加载时先执行一次，获取初始尺寸
updateScreenSize();
// 监听窗口resize事件，尺寸变化时执行updateScreenSize函数
window.addEventListener("resize", updateScreenSize);
防抖优化resize事件
resize事件在窗口拖动调整大小的过程中会高频触发，如果直接在事件处理函数中执行复杂的DOM操作，可能会导致页面性能下降，这时候可以使用防抖函数来优化，控制事件处理的执行频率。
// 防抖函数实现，延迟执行目标函数，在延迟时间内再次触发则重新计时
function debounce(fn, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
}
// 定义获取宽高的处理函数
function handleResize() {
const width = window.innerWidth;
const height = window.innerHeight;
console.log("防抖处理后，当前窗口宽度：" + width + "，高度：" + height);
}
// 用防抖包装处理函数，设置延迟时间为200毫秒
const debouncedResize = debounce(handleResize, 200);
// 初始执行一次
handleResize();
// 监听resize事件，使用防抖后的函数
window.addEventListener("resize", debouncedResize);
不同场景的属性选择建议
根据实际开发需求，我们可以选择合适的属性：
| 需求场景 | 推荐使用的属性 | 说明 |
|---|---|---|
| 获取用户设备屏幕分辨率 | screen.width / screen.height | 对应显示器硬件分辨率，不随窗口变化 |
| 响应式布局获取可视区域尺寸 | document.documentElement.clientWidth / clientHeight | 不含滚动条，符合布局计算习惯 |
| 需要包含滚动条的区域尺寸 | window.innerWidth / innerHeight | 包含滚动条宽度，适合需要完整窗口尺寸的场景 |
注意事项
- 获取尺寸的代码如果要操作DOM元素，需要放在DOM加载完成之后执行，比如放在
DOMContentLoaded事件的回调中，避免获取不到元素的问题。 - 移动端设备中，屏幕旋转也会触发resize事件，上述监听方式同样可以生效，实时获取旋转后的窗口尺寸。
- 如果页面中存在iframe，获取的是当前窗口的尺寸，不是iframe内部的尺寸，如果需要获取iframe内部尺寸，需要在iframe对应的文档环境中执行相关代码。
实际开发中建议根据业务场景选择合适的宽高属性，同时合理使用防抖优化resize事件的处理，避免不必要的性能损耗。
JavaScriptscreen_widthscreen_heightresize_event修改时间：2026-06-20 19:33:16