2. 浏览器页面尺寸获取

拿浏览器尺寸就是知道页面可视区域多大，做响应式要用。

核心三个：
① innerWidth / innerHeight——可视区域（含滚动条）
② outerWidth / outerHeight——整个浏览器窗口
③ document.documentElement.clientWidth——不含滚动条

坑：innerWidth 含滚动条宽度、resize 事件监听窗口变化、移动端要用 clientWidth。

2.1 互动演示（实时尺寸 + resize 监听）

2.2 知识点讲解

① 屏幕尺寸（screen 对象）

screen 对象描述的是"你的显示器"。availWidth / availHeight 是"可用"宽高——自动排除了底部任务栏占掉的那条，就像桌面上能放窗口的区域。

// 这块屏幕去掉底部任务栏后，能用的宽度是多少
// 能放窗口的可用宽度
window.screen.availWidth;

// 去掉任务栏后，能用的高度是多少
// 能放窗口的可用高度
window.screen.availHeight;

// 整块屏幕的物理尺寸（含任务栏占的那一条），一般用不上
// 屏幕总宽度
window.screen.width;

// 屏幕总高度
window.screen.height;

screen 是物理屏幕的尺寸，跟浏览器窗口开多大、拖到哪都没关系，是个"固定值"。

② 浏览器可视窗口尺寸（重点）

window.innerWidth / innerHeight 是"浏览器窗口里能显示内容的区域"大小，会随窗口大小实时变化——窗口拖大它就变大，拖小它就变小。

// 浏览器窗口里能看到网页的那块，宽度是多少（含滚动条占的宽度）
// 拖窗口它就跟着变
window.innerWidth;

// 那块区域的高度是多少（含滚动条占的高度）
// 拖窗口它就跟着变
window.innerHeight;

注意：包含滚动条。做响应式布局时判断"窗口宽度 < 768 就当手机版"，用的就是 innerWidth。

③ 尺寸变化实时监听：resize 事件

// 给 window 装个监听器：你一拉窗口大小，它就喊我
// 拉一下，就把新的宽高打印出来
window.addEventListener("resize", function () {
  // 实际用在哪：
  // 1. 窗口变窄就换一套布局（手机版）
  // 2. 图表也要跟着重新画，不然会变形
  console.log("窗口变了：", window.innerWidth, window.innerHeight);
});

图表库（ECharts 等）在窗口变化后必须重新 resize，否则图表要么被拉伸、要么留白，这是做数据大屏最常见的坑。

④ 什么时候用哪个（速查）

本页重点