視窗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就是縮小的比例
滾動移位 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：從用戶顯示器窗口原點到事件觸發點的設備的像素
