页面可视宽高
最近项目中要做一个缩略图放大显示功能，放大的图片由用户上传，宽高没有限制。视觉要求是：按原尺寸显示图片，图片右上角放一个关闭图标；图片若是溢出可视区，按原宽高比缩小到可视区域。 实现时涉及到了可视区域大小的获取，查询接口，发现有很多个表示页面‘width’和‘height’ 的属性。下面以Height 为例，Width 与之对称。
1） window对象有innerHeight和outerHeight
- window.innerHeight: 页面可视口的大小，包括水平滚动条的高度， 但不包括页面溢出部分。
- window.outerHeight：整个浏览器窗口的大小，包括窗口标题，状态栏，工具栏等。
2） window 对象的screen 对象有height 和availHeight， 这两个高度跟屏幕有关，与浏览器和页面无关
- window.screen.height: 指当前屏幕分辨率的高度
- window.screen.availHeight: 指屏幕可用工作区高度
3）所有DOM 对象都有clientHeight，offsetHeight，scrollHeight
- clientHeight: 'returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin'。 指元素内部的可视且可用高度，包括内间距， 但不包括边框，外边距，以及水平滚动条高度，和溢出部分高度
- offsetHeight：'is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.'。 指元素的可视高度，包括边框，内间距，水平滚动条高度，但不包括溢出部分高度。
- scrollHeight：'is a measurement of the height of an element’s content including content not visible on the screen due to overflow'. 指元素整体内容的高度，包括溢出部分。（实际计算时会加上top and bottom padding）。 当整体内容高度小于元素height时，即没有溢出，不同浏览器处理方式会不一样。chrome 认为 scrollHeight = max（内容高度，clientHeight）， 即scrollHeight>= clientHeight , 但低版本的IE 6，7 会认为 scrollHeight 就是内容高度，可以小于clientHeight。
如下示列（使用chrome67）：
container 元素的 clientHeight = height + top and bottom padding - H scrollbar height;
container 元素的offsetHeight = height + top and bottom padding + top and bottom borders ;
container 元素的scrollHeight = All children height + top and bottom padding;
从上可以知，可以使用 offsetHeight - clientHeight - top and bottom borders 计算出水平滚动条的高度。
如果要获取页面可视区域高度：可使用document 对象下的子对象 documentElement 或body 对象来获取。 两个子对象的区别：
- document.documentElement： 指的是<html> 标签对应的DOM元素；
- document.body: 指的是<body>标签对应的DOM 元素；
在使用这两个子对象分别获取clientHeight，offsetHeight，scrollHeight时，发现了一些异常（chrome 67）：
根据上面的解释，DOM元素的clientHeight < offsetHeight ，但是document.documentElement.clientHeight 大于了offsetHeight。以上的计算规则并不适用。 实际上不同的浏览器对于 document.documentElement 的高度计算处理也存在差异。 在chrome 中：
document.documentElement.clientHeight : window窗口可见高度, 但不包括水平scrollbar height, 即window.innerHeight - H scrollbar height;
document.documentElement.offsetHeight: body.offsetHeight + top and bottom margin
document.documentElement.scrollHeight: >= document.documentElement.clientHeight
document.body.clientHeight: body height + top and bottom padding;
document.body.offsetHeight: body height + top and bottom padding + borders；
document.body.scrollHeight： >=document.body.clientHeight;
因此若要获取可视窗口的高度应使用 document.documentElement.clientHeight, 或者window.innerHeight, 后者更准确, 但是IE8 以下浏览器没有这个属性。
如果浏览器存在垂直滚动条，内容溢出，若要获取页面高度(包括溢出)应使用 document.documentElement.scrollHeight;
如果浏览器不存在垂直滚动条，内容未溢出，若要获取页面内容高度，使用 document.documentElement.offsetHeight；
考虑到浏览器但兼容性，可使用如下方法获取窗口可视区：
viewableHeight = window.innerHeight || document.documentElement.clientHeight || document.body.offsetHeight
参考：