getViewportRect

获取浏览器视口的矩形信息，包含位置和尺寸数据。

前置依赖

依赖参数

参数名	类型	说明
deps.innerWidth	Window['innerWidth']	获取窗口内部宽度
deps.innerHeight	Window['innerHeight']	获取窗口内部高度

环境要求

• 浏览器环境: 使用 Window 对象的 innerWidth 和 innerHeight 属性

// 浏览器环境
const deps = {
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight
}

函数签名

function getViewportRect(deps: GetViewportRectDeps): Rect

interface GetViewportRectDeps {
  innerWidth: Window['innerWidth']
  innerHeight: Window['innerHeight']
}

interface Rect {
  width: number
  height: number
  x: number
  y: number
  top: number
  left: number
  right: number
  bottom: number
}

参数

参数名	类型	必填	说明
deps	GetViewportRectDeps	是	依赖注入对象

返回值

类型	说明
Rect	视口矩形信息对象

工作原理

1. 从 deps 对象获取窗口的 innerWidth 和 innerHeight
2. 创建并返回 Rect 对象：
   • width = innerWidth（视口宽度）
   • height = innerHeight（视口高度）
   • x, y, top, left = 0（视口原点始终为 (0, 0)）
   • right = width
   • bottom = height

视口矩形的原点始终是 (0, 0)，尺寸对应浏览器窗口的内部宽高（不包括工具栏、滚动条等）。通过依赖注入设计，可以在 Node.js（配合 jsdom）或 Electron 等环境中使用。