概念：设备像素和CSS像素
你需要明白的第一个概念是CSS像素，以及它和设备像素的区别。
设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率，并且其值可以（通常情况下）从screen.width/height属性中读出。
如果你给一个元素设置了width: 128px的属性，并且你的显示器是1024px宽，当你最大化你的浏览器屏幕，这个元素将会在你的显示器上重复显示8次（大概是这样；我们先忽略那些微妙的地方）。
如果用户进行缩放，那么计算方式将会发生变化。如果用户放大到200%，那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。
现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以，元素的宽度并没有从128个像素被修改为256个像素；相反是实际像素被放大了两倍。形式上，元素仍然是128个CSS像素宽，即使它占据了256个设备像素的空间。
换句话说，放大到200%使一个CSS像素变成为一个设备像素的四倍。（宽度2倍，高度2倍，总共4倍）
100%缩放
在缩放比例100%的情况下一个CSS像素完全等于一个设备像素。
屏幕尺寸 screen.width/height
它们的尺寸是以设备像素来进行度量的，因为它们永远不会变：它们是显示器的属性，而不是浏览器的
- 意义：用户屏幕的整体大小。
- 度量单位：设备像素。
- 浏览器错误：IE8以CSS像素对其进行度量，IE7和IE8模式下都有这个问题。
窗口尺寸 window.innerWidth/Height
注意度量的宽度和高度是包括滚动条的。它们也被视为内部窗口的一部分
很显然，窗口的内部宽度是以CSS像素进行度量的。你需要知道你的布局空间中有多少可以挤进浏览器窗口，当用户放大的时候这个数值会减少。所以如果用户进行放大操作，那么在窗口中你能获取的空间将会变少，window.innerWidth/Height的值也变小了
- 意义：浏览器窗口的整体大小，包括滚动条。
- 度量单位：CSS像素。
浏览器错误：IE7不支持。Opera以设备像素进行度量。
相反，你想知道的是浏览器窗口的内部尺寸。它告诉了你用户到底有多少空间可以用来做CSS布局。你可以通过window.innerWidth和window.innerHeight来获取这些尺寸
滚动距离
window.pageX/YOffset
意义：页面滚动的距离。
- 度量单位：CSS像素。
- 浏览器错误：无。
- window.pageXOffset和window.pageYOffset，包含了文档水平和垂直方向的滚动距离。所以你可以知道用户已经滚动了多少距离
度量viewport
document.documentElement.clientWidth/Height
- 意义：Viewport尺寸。
- 度量单位：CSS像素。
- 浏览器错误：无。
- 你可能想知道viewport的尺寸。它们可以通过document.documentElement.clientWidth和-Height得到。
两个属性对
但是难道viewport宽度的尺寸也可以通过window.innerWidth/Height来提供吗？怎么说呢，模棱两可。
两个属性对之间存在着正式区别：document.documentElement.clientWidth和-Height并不包含滚动条，但是window.innerWidth/Height包含。这像是鸡蛋里挑骨头。
当时Netscape只支持window.innerWidth/Height，IE只支持document.documentElement.clientWidth和Height。
从那时起所有其他浏览器开始支持clientWidth/Height(视口宽高)，
但是IE没有支持window.innerWidth/Height(视口宽高)。
度量<html>元素,即整个文档的宽高
document.documentElement.offsetWidth/Height
- 意义：
<html>元素（也就是页面）的尺寸。 - 度量单位：CSS像素。
- 浏览器错误：IE度量的是viewport，而不是
<html>元素。 - 所以clientWidth/Height在所有情况下都提供viewport的尺寸。
- 但是我们去哪里获取
<html>元素本身的尺寸呢？它们存储在document.documentElement.offsetWidth和-Height之中。
事件中的坐标
pageX/Y, clientX/Y, screenX/Y
- 意义：见正文。
- 度量单位：见正文。
- 浏览器错误：IE不支持pageX/Y。IE和Opera以CSS像素为单位计算screenX/Y。
- 然后是事件中的坐标。当一个鼠标事件发生时，有不少于五种属性对可以给你提供关于事件位置的信息。对于我们当前的讨论来说它们当中的三种是重要的：
pageX/Y提供了相对于
<html>元素的以CSS像素度量的坐标。
clientX/Y提供了相对于viewport的以CSS像素度量的坐标。
screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标
90%的时间你将会使用pageX/Y；通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。