获取浏览器/界面宽高的问题

1.对于IE9 +，Chrome，Firefox，Opera以及Safari：

• window.innerHeight - 浏览器内部界面的高度（内容显示区域的高度，F12后会实时改变）
• window.outerHeight - 浏览器窗体的高度（浏览器的高度）
• window.innerWidth - 浏览器内部界面的宽度（内容显示区域的宽度，F12后会实时改变）
• window.outerWidth - 浏览器窗体的宽度（浏览器的宽度）

2.clientHeight（可视区域大小）：

• document.documentElement.clientHeight  表示HTML文档所在窗口的可视区域高度（类似于window.innerHeight）
• document.body.clientHeight  表示身体的可视区域高度
• document.documentElement.clientWidth  表示HTML文档所在窗口的可视区域宽度（类似于window.innerWidth）
• document.body.clientWidth  表示身体的可视区域宽度

注意：身体与浏览器之间有个默认的保证金

 

 

3.scrollHeight，scrollWidth（获取网页内容高度和宽度）

 

 

• document.documentElement.scrollWidth || document.body.scrollWidth 
• document.documentElement.scrollHeight || document.body.scrollHeight 

 

4.offsetHeight网页尺寸

的offsetHeight和offsetWidth，获取网页内容高度和宽度（可视区域包括滚动条等边线，会随窗口的显示大小改变）

 

 

• document.documentElement.offsetWidth || document.body.offsetWidth;
• document.documentElement.offsetHeight || document.body.offsetHeight;

 

高度，clientHeight，scrollHeight属性，的offsetHeight区别图解 

http://www.cnblogs.com/yuteng/articles/1894578.html

 

scrollLeft：设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。
scrollTop的：设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。
offsetLeft：获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置。
的offsetTop：获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置。

注意：
1.区分大小写
2。 offsetParent ：布局中设置属性（相对，绝对，固定）的父容器，从最近的父节点开始，一层层向上找，直到HTML的正文。

兼容性的JS方案：

 

var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;