← 返回目录

2. 浏览器页面尺寸获取

先把两个概念分清楚：screen 是你的显示器（屏幕），window 是浏览器那个"框"。屏幕多大不会变，窗口大小可以拖。screen 管屏幕、window.inner* 管浏览器可视区——拖动窗口，下面数字会实时变。

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 () {
  // 拉一下，就把新的宽高打印出来
  console.log("窗口变了：", window.innerWidth, window.innerHeight);
  // 实际用在哪：
  // 1. 窗口变窄就换一套布局（手机版）
  // 2. 图表也要跟着重新画，不然会变形
});

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

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