视窗viewport

视窗viewport

    严格等于浏览器的窗口，在桌面浏览器中，viewport就是浏览器窗口的宽度高度，但在移动端中，viewport太窄，所以提供了两个viewport：虚拟的viewport visualviewport和布局的viewport layoutviewport。

1. 布局视口是一个不可改变大小或者形状的大框，可以比可视视口大得多，包含出现在屏幕上但用户看不到的元素。（就像移动端页面被用户放大，用户只看到的那一部分是可视视口，可以改变可视视口的大小和形状看到不一样的内容，但是布局视口的大小和形状永远不会改变）
2. 可视视口是当前屏幕上显示的页面的一部分。

---

设备的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就是缩小的比例

滚动移位 Scrolling offset

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：从用户显示器窗口原点到事件触发点的设备的像素