獲取屏幕寬高width(),outerWidth,innerWidth,documentElement.clientWidth, body.clientWidth的區別
基本介紹
$(window).width()與$(window).height()
$(window).width()與$(window).height()：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條。
$(window).width() = width + padding
$(window).height() = height + padding
document.documentElement.clientWidth與document.documentElement.clientHeight
document.documentElement.clientWidthdocument.documentElement.clientHeight：獲得的是屏幕可視區域的寬高，不包括滾動條與工具條，跟jquery的(window).width()與(window).height()獲得的結果是一樣的。
document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding
window.innerWidth與window.innerHeight
window.innerWidth與window.innerHeight
window.innerWidth = width + padding + border + 縱向滾動條寬度
window.innerHeight = height + padding + border + 橫向滾動條高度
window.outerWidth與window.outerHeight
window.outerWidth與window.outerHeight：獲得的是加上工具條與滾動條窗口的寬度與高度。
window.outerWidth = width + padding + border + 縱向滾動條寬度
window.outerHeight = height + padding + border + 橫向滾動條高度 + 工具條高度
document.body.clientWidth與document.body.clientHeight
document.body.clientWidth與document.body.clientHeight：document.body.clientWidth獲得的也是可視區域的寬度，但是document.body.clientHeight獲得的是body內容的高度，如果內容只有200px，那麽這個高度也是200px,如果想通過它得到屏幕可視區域的寬高，需要樣式設置，如下：
body { height: 100%; overflow: hidden; } body, div, p, ul { margin: 0; padding: 0; }
最關鍵的是：body的height:100%影響document.body.clientHeight的值。
body的margin:0,padding:0影響document.body.clientWidth的值。
offsetWidth & offsetHeight
返回本身的寬高 + padding + border + 滾動條
offsetLeft & offsetTop
所有HTML元素擁有offsetLeft和offsetTop屬性來返回元素的X和Y坐標
1.相對於已定位元素的後代元素和一些其他元素（表格單元），這些屬性返回的坐標是相對於祖先元素
2.一般元素，則是相對於文檔，返回的是文檔坐標
offsetParent屬性指定這些屬性所相對的父元素，如果offsetParent為null，則這些屬性都是文檔坐標
//用offsetLeft和offsetTop來計算e的位置 function getElementPosition(e){ var x = 0,y = 0; while(e != null) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; } return { x : x, y : y }; }
scrollWidth & scrollHeight
這兩個屬性是元素的內容區域加上內邊距，在加上任何溢出內容的尺寸.
因此，如果沒有溢出時，這些屬性與clientWidth和clientHeight是相等的。
scrollLeft & scrollTop
指定的是元素的滾動條的位置
scrollLeft和scrollTop都是可寫的屬性，通過設置它們來讓元素中的內容滾動。
兼容性
1.window innerWidth 和 innerHeight 屬性與outerWidth和outerHeight屬性IE8以及以下不支持。
2.測試瀏覽器IE，火狐，谷歌，360瀏覽器，Safari都支持document.documentElement.clientWidth與document.documentElement.clientHeight。
結論
獲取屏幕的可視區域的寬高可使用jquery的方式獲得，也可以使用原生js獲得，即：
document.documentElement.clientWidth與document.documentElement.clientHeight
獲取屏幕寬高width(),outerWidth,innerWidth,documentElement.clientWidth, body.clientWidth的區別