视窗viewport
严格等于浏览器的窗口，在桌面浏览器中，viewport就是浏览器窗口的宽度高度，但在移动端中，viewport太窄，所以提供了两个viewport：虚拟的viewport visualviewport和布局的viewport layoutviewport。
布局视口是一个不可改变大小或者形状的大框，可以比可视视口大得多，包含出现在屏幕上但用户看不到的元素。（就像移动端页面被用户放大，用户只看到的那一部分是可视视口，可以改变可视视口的大小和形状看到不一样的内容，但是布局视口的大小和形状永远不会改变）可视视口是当前屏幕上显示的页面的一部分。
设备的pixels和css的pixels（像素）
设备的像素为标准的像素宽度，在大多数情况下等于screen.width/height。现代浏览器的缩放（zoom）是基于伸展pixels，结果是html元素上的宽度并没有因为缩放200%而由128px变为256px，在形式上依然是128 css的像素，即便他占用了256设备的像素，将一个单位的CSS的像素变成了4倍的设备的像素那么大，即高度*2、宽度*2，面积扩大了4
100%缩放：在缩放级别为100%时，1单位的CSS的pixel是严格相等于1单位的设备的pixel
屏幕尺寸 Screen size
screen.width/height - 含义：用户的屏幕的完整大小 - 度量：设备的像素 - 兼容性：都以css的pixels来度量
浏览器尺寸 Window size
window.innerWidth/Height - 含义：包含滚动条尺寸的浏览器完整尺寸 - 度量：css的像素 - 兼容性：IE不支持，Opera用设备像素来度量 - 当用户放大显示时，能获取的浏览器窗口可用空间会减少，window.innerWidth/Height就是缩小的比例
window.pageX/YOffset - 含义：页面的移位，定义了页面的相对于窗口原点的水平、垂直位移，能够定位用户滚动了多少的滚动条距离（包含滚动条） - 度量：css的像素 - 兼容性：在IE8及之前版本的IE不支持，使用document.body.scrollLeft和document.body.scrollTop来取代（不包含滚动条）
度量html元素
document.documentElement.offsetWidth/Height - 含义：html的尺寸 - 度量：css的像素 - 兼容性：IE使用这个值表示viewport的尺寸而非html
事件坐标
pageX/Y：从html原点到事件触发点的css的像素clientX/Y：从viewport原点（浏览器窗口）到事件触发点的css的像素screenX/Y：从用户显示器窗口原点到事件触发点的设备的像素
