Window innerWidth 和 innerHeight 属性（千字长文）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页开发中，了解浏览器窗口的尺寸是实现动态布局、响应式设计和交互功能的基础。Window.innerWidth 和 Window.innerHeight 是 JavaScript 中两个关键属性，能够帮助开发者实时获取浏览器窗口的可视区域宽度和高度。无论是调整元素位置、优化移动端适配，还是开发游戏或动画效果，这两个属性都扮演着重要角色。本文将从基础概念出发，逐步深入讲解它们的用法、实际案例及注意事项，帮助开发者高效利用这一工具。

什么是 Window 对象？

在 JavaScript 中，Window 对象是浏览器窗口（或标签页）的顶级容器，它提供了访问浏览器窗口、文档、导航等核心功能的接口。简单来说，Window 就是网页运行的“画布”或“舞台”，而 innerWidth 和 innerHeight 则是测量这幅“画布”尺寸的标尺。

比喻：可以将浏览器窗口想象成一个画框，而 Window 对象就是这幅画框的“管理员”。innerWidth 和 innerHeight 则像画框边缘的刻度线，告诉你当前画框内部的实际可用空间有多大。

innerWidth 和 innerHeight 的基本语法

定义与用法

• Window.innerWidth：返回浏览器窗口可视区域的宽度（像素单位）。
• Window.innerHeight：返回浏览器窗口可视区域的高度（像素单位）。

注意：这两个属性的值不包含浏览器工具栏、地址栏等非内容区域，仅反映用户实际看到的页面可编辑区域的大小。

语法示例

// 获取当前窗口的宽度和高度
const width = window.innerWidth;
const height = window.innerHeight;

console.log(`窗口宽度：${width}px，高度：${height}px`);

与其他属性的区别

实际应用场景与案例

案例 1：动态调整页面元素尺寸

假设需要根据窗口大小调整一个全屏背景图片的尺寸：

function adjustBackground() {
  const bgElement = document.getElementById("background");
  bgElement.style.width = `${window.innerWidth}px`;
  bgElement.style.height = `${window.innerHeight}px`;
}

// 页面加载时初始化
adjustBackground();

// 窗口大小变化时重新调整
window.addEventListener("resize", adjustBackground);

效果：当用户缩放浏览器窗口时，背景图片会自动适配新尺寸，始终保持全屏覆盖。

案例 2：响应式布局的条件判断

结合条件语句，可以针对不同窗口尺寸显示不同的内容结构：

function checkWindowSize() {
  const width = window.innerWidth;
  if (width < 768) {
    // 移动端布局：隐藏侧边栏，启用触控导航
    document.body.className = "mobile-view";
  } else {
    // 桌面端布局：显示完整导航栏
    document.body.className = "desktop-view";
  }
}

// 初始加载和窗口变化时触发
window.addEventListener("load", checkWindowSize);
window.addEventListener("resize", checkWindowSize);

案例 3：游戏开发中的视口适配

在开发 canvas 游戏时，窗口尺寸直接影响画布的渲染效果：

const canvas = document.querySelector("canvas");

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  // 重新绘制游戏场景
  drawGame();
}

// 初始化并监听窗口变化
resizeCanvas();
window.addEventListener("resize", resizeCanvas);

注意事项与常见问题

问题 1：滚动条的影响

浏览器的滚动条会占用窗口的可视区域，导致 innerWidth 和 innerHeight 的实际可用空间减少。例如，当页面内容超出窗口高度时，垂直滚动条的出现会减少 innerWidth 的值。

解决方案：

• 使用 CSS 的 box-sizing: border-box 确保元素尺寸包含边框和内边距。
• 通过 window.outerWidth 和 window.outerHeight 结合计算滚动条宽度（需兼容性处理）。

问题 2：移动端适配差异

在移动端设备中，浏览器工具栏（如地址栏）的隐藏或显示会动态改变窗口尺寸。例如，用户点击输入框时，地址栏可能被隐藏，导致 innerHeight 增加。

应对策略：

• 监听 resize 事件并结合 orientationchange 事件（针对屏幕方向变化）。
• 使用 CSS 媒体查询与 JavaScript 结合，确保布局在动态变化中保持稳定。

问题 3：浏览器兼容性

尽管 innerWidth 和 innerHeight 在现代浏览器中广泛支持，但在某些旧版本或特定环境（如 IE 8 及更早版本）中可能需要回退到 document.documentElement.clientWidth/Height。

兼容性代码示例：

function getInnerWidth() {
  return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}

function getInnerHeight() {
  return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

进阶技巧：结合事件与动画

技巧 1：平滑的窗口调整动画

当窗口大小变化时，可以添加过渡动画提升用户体验：

window.addEventListener("resize", function() {
  const duration = 0.3; // 动画持续时间（秒）
  document.body.style.transition = `width ${duration}s, height ${duration}s`;
  // 更新元素尺寸逻辑...
});

技巧 2：与 CSS 媒体查询协同工作

JavaScript 可以与 CSS 媒体查询互补，例如动态更新类名以触发样式变化：

// JavaScript 监听窗口尺寸
function updateClass() {
  const width = window.innerWidth;
  document.body.classList.toggle("small-screen", width < 600);
}

// CSS 样式
/* style.css */
.small-screen .sidebar {
  display: none;
}

结论

Window.innerWidth 和 innerHeight 是网页开发中不可或缺的工具，它们帮助开发者精准控制页面布局、优化用户体验并实现复杂交互功能。通过结合实际案例、注意事项和进阶技巧，开发者可以更灵活地应对不同场景需求。无论是设计响应式网站、开发全屏应用，还是优化移动端适配，掌握这两个属性的核心逻辑将显著提升开发效率。

关键点回顾：

1. innerWidth 和 innerHeight 测量的是浏览器窗口的可视区域。
2. 结合 resize 事件可实现动态响应。
3. 注意滚动条和移动端工具栏对尺寸的影响。
4. 通过代码示例和技巧，逐步构建复杂功能。

通过本文的讲解，希望开发者能够熟练运用这两个属性，为用户提供更流畅、更智能的网页体验。