获取屏幕，窗口和网页大小

在js中获取屏幕，窗口和网页大小的一些方法记录

屏幕

屏幕尺寸：屏幕的宽度和高度(显示器有像素的地方)。window.screen 保存屏幕尺寸信息的对象。

• screen.width：屏幕的宽。
• screen.height：屏幕的高。

可用屏幕：去除系统工具栏（mac 顶部栏或 windows 底部栏）

screen.availWidth：可利用的宽，等于屏幕的宽。
screen.availHeight：可利用的高，等于屏幕的高减去 mac 顶部栏或 windows 底部栏。

屏幕距离：浏览器窗口到屏幕的距离，各浏览器全屏时的初值不同，谷歌全屏时四个值均为0

• screenTop：浏览器窗口左上角到屏幕上边缘的距离。 需要注意浏览器兼容性
• screenLeft：浏览器窗口左上角到屏幕左边缘的距离。
• screenX：等于 screenLeft。
• screenY：等于 screenTop。

浏览器窗口

窗口的外部大小由整个浏览器窗口的宽度和高度组成，包含地址栏，选项卡栏和其他浏览器面板。当浏览器窗口退出全屏化时，其四周会有8px的边框。而当浏览器窗口全屏化时，边框虽然未被显示，但仍然是计算在outerWidth和outerHeight内，各浏览器是否计算边框不尽相同。Chrome不计算，outerWidth和outerHeight指的是可以看到的浏览器部分所占据的空间。

• window.outerWidth：浏览器窗口的宽。
• window.outerHeight：浏览器窗口的高。

窗口的内部大小（也称为视口大小）由显示网页的视口的宽度和高度组成，包含滚动条。

• window.innerWidth：视口的宽。
• window.innerHeight：视口的高。

元素的客户区大小（client dimension），指的是元素内容及其内边距所占据的空间大小。不包括滚动条

• clientWidth：内容可视区的宽度，元素宽 + padding（左右）。
• clientHeight：内容可视区的高度。

网页大小由呈现的页面内容的宽度和高度组成

• scrollWidth：实际内容的宽度。没有垂直滚动条时与clientWidth相同。否则是等于实际内容的宽度 +
  padding。scrollWidth也包括 ::before 和 ::after这样的伪元素。
• scrollHeight：实际内容的高度。没有垂直滚动条时与clientHeight相同。否则是等于实际内容的高度 +
  padding。scrollHeight也包括 ::before 和 ::after这样的伪元素。

滚动距离：元素与窗口中可见内容的距离，可以理解为显示不下的内容的宽度

• scrollLeft：元素最左端和窗口中可见内容的最左端之间的距离。即当前左滚的距离
• scrollTop：元素最顶端和窗口中可见内容的最顶端之间的距离。即当前上滚的距离