JavaScript 得到当前浏览器窗口尺寸大小的脚本

封面图 • 2025-11-29 • JavaScript

在 JavaScript 中，你可以使用 `window` 对象来获取当前浏览器窗口的尺寸大小。以下是几种常见的方法：

---

### ✅ 1. 获取**视口（viewport）**尺寸（即用户能看到的部分）

```javascript
const width = window.innerWidth;
const height = window.innerHeight;

console.log("窗口宽度: " + width);
console.log("窗口高度: " + height);
```

- `window.innerWidth`：返回浏览器窗口的内部宽度（包括滚动条）。
- `window.innerHeight`：返回浏览器窗口的内部高度（包括滚动条）。

---

### ✅ 2. 获取**整个文档的尺寸**（包括滚动部分）

```javascript
const documentWidth = document.documentElement.scrollWidth;
const documentHeight = document.documentElement.scrollHeight;

console.log("文档宽度: " + documentWidth);
console.log("文档高度: " + documentHeight);
```

- `document.documentElement.scrollWidth`：整个文档的宽度（包含不可见部分）。
- `document.documentElement.scrollHeight`：整个文档的高度（包含不可见部分）。

---

### ✅ 3. 获取**窗口的大小变化事件**

如果你想在窗口大小变化时执行某些操作，可以监听 `resize` 事件：

```javascript
window.addEventListener('resize', () => {
    console.log("窗口大小已改变");
    console.log("当前宽度: " + window.innerWidth);
    console.log("当前高度: " + window.innerHeight);
});
```

---

### 📝 注意事项

- `innerWidth` 和 `innerHeight` 是标准属性，兼容性良好。
- 如果你使用的是旧版浏览器（如 IE8 及以下），可能需要使用 `document.body.clientWidth` 等替代方式，但现代浏览器一般不再支持这些旧写法。

---

如果你有更具体的用途（比如响应式布局、弹窗适配等），也可以告诉我，我可以提供更详细的建议。

JavaScript 得到当前浏览器窗口尺寸大小的脚本