window.innerwidth 和 window.innerheight 是获取浏览器窗口可视区域尺寸最直接可靠的方式，现代浏览器及ie9+均支持，ie8及更早需降级使用 document.documentelement.clientwidth/clientheight；不用 document.body 是因其受css影响大、在quirks模式或未设 height:100% 时易返回错误值。
window.innerWidth 和 window.innerHeight 是获取浏览器窗口可视区域尺寸最直接、最可靠的方式，现代浏览器（Chrome/Firefox/Safari/Edge）全支持，IE 9+ 也支持；IE 8 及更早版本必须降级用 document.documentElement.clientWidth 和 document.documentElement.clientHeight。
为什么不用 document.body.clientWidth？
它在多数情况下能返回可视宽高，但有明显陷阱：
- 如果
或没设height: 100%，document.body.clientHeight可能返回0或远小于实际窗口高度 - 在某些文档模式（如 quirks mode）下，
document.body的尺寸计算逻辑不一致，尤其 IE 系列表现混乱 -
document.body是 DOM 节点，其尺寸受 CSS 影响大；而window属性是原生浏览器 API，与样式无关，更稳定
window.innerWidth vs document.documentElement.clientWidth
两者都返回“当前可见区域宽度”，但含义和行为有关键差异：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
-
window.innerWidth包含垂直滚动条宽度（如果存在），即真实用户看到的横向可用像素 -
document.documentElement.clientWidth排除滚动条，只算内容区净宽 —— 这对精确布局（比如全屏遮罩、canvas 绘图尺寸）有时更合适 - 移动端 Safari 在地址栏收起/展开时，
window.innerHeight会实时变化，而clientHeight可能滞后或不响应 - 服务端渲染（SSR）环境里
window不存在，此时只能用document.documentElement相关属性（但需确保 DOM 已就绪）
页面总尺寸（含滚动部分）怎么拿？
要测整个文档内容的原始大小（比如判断是否需要滚动、计算懒加载临界点），不能靠 window，得用 document 相关属性：
- 总宽度：
document.documentElement.scrollWidth（推荐）或document.body.scrollWidth（兼容旧 IE） - 总高度：
document.documentElement.scrollHeight（同上） - 注意：如果
没设height: 100%，document.body.scrollHeight可能小于document.documentElement.scrollHeight，优先读前者 - 这些值在 DOM 渲染完成前可能为
0，务必等DOMContentLoaded或load事件后取
真正容易被忽略的是滚动状态的影响：比如你用 window.innerHeight 做响应式断点，但用户缩放页面或切换横竖屏时，该值会突变；而 screen.width 这类设备级属性完全不变。别把“窗口尺寸”和“设备尺寸”混用 —— 前者是运行时动态的，后者是静态硬件参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
