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

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

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

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

兼容性的JS方案：

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

转载于:https://my.oschina.net/u/3855636/blog/1823323