JavaScript 中怎么获取当前浏览器的视口窗口宽高大小-js教程-PHP中文网

window.innerwidth 和 window.innerheight 是获取视口宽高的标准方法，返回不含浏览器 ui 元素的内容区尺寸，实时响应缩放与旋转，且已扣除滚动条宽度；可监听 resize 事件动态更新，移动端需注意地址栏变化影响，必要时用 visualviewport api 获取更精准视觉区域。

javascript 中怎么获取当前浏览器的视口窗口宽高大小

用 window.innerWidth 和 window.innerHeight 就能直接拿到当前视口的宽高，这是最标准、兼容性好且不依赖 DOM 加载的方法。

获取视口尺寸的核心属性

这两个属性返回的是浏览器窗口中**实际显示网页内容的区域**（不含地址栏、书签栏、滚动条等 UI 元素）的像素值：

window.innerWidth：返回视口的宽度（单位：px）
window.innerHeight：返回视口的高度（单位：px）

它们是只读属性，实时反映用户缩放、窗口缩放或设备旋转后的尺寸变化。

注意滚动条是否计入的问题

在某些浏览器（如 Chrome、Firefox）中，innerWidth/innerHeight 默认**已扣除垂直/水平滚动条的宽度**（如果存在），所以结果就是纯内容区大小。无需额外减去 document.body.offsetWidth - document.documentElement.clientWidth 这类复杂计算。

但如果你需要包含滚动条的“整个窗口内框”尺寸（极少见），可改用 document.documentElement.clientWidth/clientHeight —— 它代表根元素（）的 CSS 布局视口大小，也不含滚动条，但在页面有横向滚动条时可能略小于 innerWidth。

java-enterprise

Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、

下载

响应式监听窗口变化

当用户拖拽调整窗口大小或切换横竖屏时，可以监听 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 或沉浸式场景。

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