window.innerWidth 和 window.innerHeight 是获取视口宽高的标准方法，返回不含浏览器 UI 元素的内容区尺寸，实时响应缩放与旋转，且已扣除滚动条宽度；可监听 resize 事件动态更新，移动端需注意地址栏变化影响，必要时用 visualViewport API 获取更精准视觉区域。
用 window.innerWidth 和 window.innerHeight 就能直接拿到当前视口的宽高，这是最标准、兼容性好且不依赖 DOM 加载的方法。
获取视口尺寸的核心属性
这两个属性返回的是浏览器窗口中**实际显示网页内容的区域**（不含地址栏、书签栏、滚动条等 UI 元素）的像素值：
- window.innerWidth：返回视口的宽度（单位：px）
- window.innerHeight：返回视口的高度（单位：px）
它们是只读属性，实时反映用户缩放、窗口缩放或设备旋转后的尺寸变化。
注意滚动条是否计入的问题
在某些浏览器（如 Chrome、Firefox）中，innerWidth/innerHeight 默认**已扣除垂直/水平滚动条的宽度**（如果存在），所以结果就是纯内容区大小。无需额外减去 document.body.offsetWidth - document.documentElement.clientWidth 这类复杂计算。
立即学习“Java免费学习笔记（深入）”；
但如果你需要包含滚动条的“整个窗口内框”尺寸（极少见），可改用 document.documentElement.clientWidth/clientHeight —— 它代表根元素（<html>）的 CSS 布局视口大小，也不含滚动条，但在页面有横向滚动条时可能略小于 innerWidth。
响应式监听窗口变化
当用户拖拽调整窗口大小或切换横竖屏时，可以监听 resize 事件来动态更新尺寸：
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
console.log(`视口变为：${width} × ${height}`);
});注意避免高频触发导致性能问题，必要时可加节流（throttle）处理。
移动端适配的小提醒
在 iOS Safari 或部分安卓浏览器中，地址栏收起/展开会改变 innerHeight（比如从 600px 变成 660px），这个行为是正常的。若需稳定高度（如全屏 Canvas），建议结合 visualViewport API（较新，[支持度需查 MDN](https://caniuse.com/visualviewport)）：
if ('visualViewport' in window) {
const { width, height } = visualViewport;
console.log('视觉视口：', width, '×', height);
}它更精准反映用户当前看到的渲染区域，尤其适合 PWA 或沉浸式场景。
