最可靠方式是使用 window.innerwidth 和 window.innerheight；二者返回 css 像素单位的视口宽高，自动排除滚动条，兼容所有现代浏览器，推荐优先使用，必要时再 fallback 到 documentelement。

在 JavaScript 中，获取浏览器当前视口（viewport）尺寸最常用、最可靠的方式是使用 window.innerWidth 和 window.innerHeight。

直接读取 innerWidth / innerHeight

这两个属性返回的是**CSS 像素单位**的视口宽高，已自动排除滚动条占用空间，且兼容现代所有主流浏览器（包括移动端）。

• window.innerWidth：返回视口的宽度（含垂直滚动条时，不包含滚动条宽度）
• window.innerHeight：返回视口的高度（含水平滚动条时，不包含滚动条高度）

示例：

<script><br> console.log("视口宽度：", window.innerWidth);<br> console.log("视口高度：", window.innerHeight);<br> </script>

注意 document.documentElement.clientWidth / clientHeight 的区别

虽然 document.documentElement.clientWidth 和 clientHeight 也能获取视口尺寸，但它们在某些场景下不如 innerWidth/innerHeight 稳定：

• 在 IE8 及更早版本中表现不一致
• 在部分移动端浏览器（如旧版 iOS Safari）中可能受缩放、地址栏显示/隐藏影响而返回非预期值
• 不包含滚动条宽度/高度的自动扣除逻辑（某些情况下需手动处理）

✅ 推荐优先用 window.innerWidth 和 window.innerHeight；仅在需要兼容极老环境且已知 DOM 已就绪时，才考虑 fallback 到 documentElement。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

监听视口尺寸变化（响应式适配）

用户缩放、横竖屏切换、地址栏显隐都会改变视口尺寸。用 resize 事件监听：

<script><br> function handleResize() {<br> const w = window.innerWidth;<br> const h = window.innerHeight;<br> console.log(`视口变为 ${w} × ${h}`);<br> }<br> window.addEventListener('resize', handleResize);<br> </script>

⚠️ 注意：该事件触发频繁，生产环境建议配合防抖（debounce）使用。

移动端特别提醒：避免误用 scrollWidth / offsetWidth

这些属性返回的是元素自身的布局尺寸，不是视口尺寸：

• document.body.scrollWidth 是 body 内容总宽度（可能大于视口）
• document.documentElement.offsetWidth 是 html 元素的布局宽（通常等于 viewport 宽，但不可靠）

它们不能替代 innerWidth/innerHeight，尤其在页面有横向滚动或设置了 overflow-x: hidden 时极易出错。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南