1.屏幕 （screen 属性）
Window 对象的screen属性引用的是Screen对象，他有width , height 属性， 分别指定的是以像素计的屏幕的宽高， 而
availWidth availHeight 指的是实际可用的宽和高（他们排出了桌面任务栏这些特性所用的宽高）。
2 浏览器可视区大小（所谓可视区域是指能看得见的区域，即在浏览器中能看到页面的区域（高度与宽度）。）
在标准浏览器中，可以使用window 的innerWidth
和innerHeight属性（IE支持IE9以及更高）
window.innerWidth
window.innerHeight （如果浏览器有滚动条 ，则包括滚动条的边栏所占的几像素的宽高）
在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：
document.documentElement.clientWidth
document.documentElement.clientHeight （如果浏览器有滚动条 ，不会包括滚动条的边栏所占的几像素的宽高）
在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：
document.body.offsetWidth
document.body.offsetHeight
3. 文档坐标和视口坐标
元素的位置是像素来度量的，向右代表X增加，向下代表Y增加，针对框架页中显示的文档，视口是定义了框架页的<iframe>元素，文档坐标比视口坐标更加基础，并且在用户滚动时候不会发生任何变化。
为了在坐标系之间进行转换，我们需要判定浏览器窗口中的滚动条位置。
在IE9以及更高或者其他现在浏览器中，Window对象的pageXoffset ,
pageYoffset提供这些值，
也可以通过
查询文档的根节点（document.documentElement）的 scrollLeft scrollTop 来获取。但是在怪异模式下，必须使用
document.body 上来查询他们。
下面是一个 以X 有来返回滚动条偏移量的。
function getScrollOffset(w){
var w = w || window;
//除了IE8以及更早版本，所有浏览器都可以用
if(w.pageXoffset !== null){ return {x:
w.pageXOffset, y: w.pageYOffset}};
//对于标准模式下的IE（或其他任何浏览器）
var d = w.document;
if(window.compatMode ==
"CSS1Compat"){
return {x: d.documentElement.scrollLeft, y:
d.documentElement.scrollTop}; // 但是谷歌浏览器不认识这厮，
但是可以通过 document.body 来获取。
// 对于怪异模式下的浏览器
return {x: d.body.scrollLeft, y:
scrollTop}
}
}
4. 元素尺寸