浏览器、视口、元素的尺寸

1. 浏览器

浏览器的尺寸：(应用程序的尺寸)

window.outerWidth

window.outerHeight

2. 视口

包含滚动条：(浏览器窗口)

window.innerWidth

window.innerHeight

不包含滚动条：

document.documentElement.clientWidth

document.documentElement.clientHeight

3. 元素

获取元素的尺寸和位置：

interface Element {
  getBoundingClientRect(): DOMRect;
}

interface DOMRect extends DOMRectReadOnly {
  height: number;
  width: number;

  x: number;
  y: number;
}

interface DOMRectReadOnly {
  // 相对于视口的原点（视口的上边界和左边界）的距离
  readonly bottom: number; 
  readonly left: number;
  readonly right: number;
  readonly top: number;
  

  // 元素的整体尺寸，包括被滚动隐藏的部分
  // padding 和 border 参与计算
  // height = bottom - top
  // width = right - left
  readonly width: number;
  readonly height: number;

  // 视口坐标
  readonly x: number;
  readonly y: number;

  toJSON(): any;
}