最可靠方式是使用 window.innerWidth 和 window.innerHeight；二者返回 CSS 像素单位的视口宽高，自动排除滚动条，兼容所有现代浏览器，推荐优先使用，必要时再 fallback 到 documentElement。
在 JavaScript 中，获取浏览器当前视口（viewport）尺寸最常用、最可靠的方式是使用 window.innerWidth 和 window.innerHeight。
直接读取 innerWidth / innerHeight
这两个属性返回的是**CSS 像素单位**的视口宽高，已自动排除滚动条占用空间，且兼容现代所有主流浏览器（包括移动端）。
- window.innerWidth：返回视口的宽度（含垂直滚动条时，不包含滚动条宽度）
- window.innerHeight：返回视口的高度（含水平滚动条时，不包含滚动条高度）
示例：
<script>console.log("视口宽度：", window.innerWidth);
console.log("视口高度：", window.innerHeight);
</script>
注意 document.documentElement.clientWidth / clientHeight 的区别
虽然 document.documentElement.clientWidth 和 clientHeight 也能获取视口尺寸，但它们在某些场景下不如 innerWidth/innerHeight 稳定：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 在 IE8 及更早版本中表现不一致
- 在部分移动端浏览器（如旧版 iOS Safari）中可能受缩放、地址栏显示/隐藏影响而返回非预期值
- 不包含滚动条宽度/高度的自动扣除逻辑（某些情况下需手动处理）
✅ 推荐优先用 window.innerWidth 和 window.innerHeight；仅在需要兼容极老环境且已知 DOM 已就绪时，才考虑 fallback 到 documentElement。
监听视口尺寸变化（响应式适配）
用户缩放、横竖屏切换、地址栏显隐都会改变视口尺寸。用 resize 事件监听：
function handleResize() {
const w = window.innerWidth;
const h = window.innerHeight;
console.log(`视口变为 ${w} × ${h}`);
}
window.addEventListener('resize', handleResize);
</script>
⚠️ 注意：该事件触发频繁，生产环境建议配合防抖（debounce）使用。
移动端特别提醒：避免误用 scrollWidth / offsetWidth
这些属性返回的是元素自身的布局尺寸，不是视口尺寸：
-
document.body.scrollWidth是 body 内容总宽度（可能大于视口） -
document.documentElement.offsetWidth是 html 元素的布局宽（通常等于 viewport 宽，但不可靠）
它们不能替代 innerWidth/innerHeight，尤其在页面有横向滚动或设置了 overflow-x: hidden 时极易出错。
