1:window對(duì)象的寬高:window.innerHeight ?window.outerHeight ?window.innerWidth ?window.outerWidth
inner指的是打開(kāi)的瀏覽器窗口的可視寬高,包括滾動(dòng)條但不包括項(xiàng)目欄這些,outer是整個(gè)窗口的高度.全屏的時(shí)候就是screen.height.tips:隨著窗口大小的調(diào)整這四個(gè)值會(huì)改變.調(diào)整窗口用resizeBy()和resizeTo();ie8以下不支持這四個(gè)值,同時(shí)使用下面第三點(diǎn)里面的document.documentElement(html tag) 或 document.body (body tag)（與 IE 的版本相關(guān)）的 clientWidth 和 clientHeight 屬性替代inner的兩個(gè)值而outer的兩個(gè)值沒(méi)有替代屬性.兼容寫(xiě)法是:var height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight.
2,顯示器的寬高:screen.height ?screen.width ?screen.availHeight ?screen.availWidth ?screenTop ?screenLeft
screen.height:返回瀏覽器窗口可占用的最大寬度,全屏模式下是顯示器的寬高,如果有系統(tǒng)的任務(wù)欄可能就要減掉這個(gè)的寬高.和操作系統(tǒng)有關(guān).
screen.availHeight,screen.availWidth:瀏覽器窗口可以在屏幕上占用的最大寬高.這個(gè)和瀏覽器以及操作系統(tǒng)的實(shí)現(xiàn)有很大的關(guān)系.在mac下面是screen.height減去任務(wù)欄的高度.
screenTop和screenLeft:這兩個(gè)值是瀏覽器窗口距離屏幕左邊和上班的距離,如果瀏覽器全屏,為0.
3,dom元素的寬高:client offset ?scroll各有四個(gè)屬性,一對(duì)寬高和一對(duì)上左.
1.element.clientHeight:元素的內(nèi)容加上padding的高度,和為了兼容ie的body和html標(biāo)簽的clientHeight是從document對(duì)象上繼承的屬性,最終作用于元素上面的.還有一對(duì)clientTop和clientLeft是用在代碼里面讀取元素邊框,也就是border的寬度的作用.
2.element.offsetHeight:整個(gè)元素內(nèi)容可視區(qū)域的大小,包括邊框和滾動(dòng)條.offsetTop和offsetLeft有一個(gè)父節(jié)點(diǎn),如果父節(jié)點(diǎn)沒(méi)有進(jìn)行absolute或者relative的css定位,則offsetparent是body元素,如果父元素有css定位,則offsetparent是該最近的父元素.在不同的瀏覽器中這個(gè)offset值不一樣.火狐是最大的,父margon+父padding+子border+子margin;在chrome和ie8及以上,少了border,在ie8以下,還少了父margin.
HTMLElement.offsetLeft是一個(gè)只讀屬性，返回當(dāng)前元素左上角相對(duì)于HTMLElement.offsetParent節(jié)點(diǎn)的左邊界偏移的像素值。
對(duì)塊級(jí)元素來(lái)說(shuō)，offsetTop、offsetLeft、offsetWidth及offsetHeight描述了元素相對(duì)于offsetParent的邊界框。
然而，對(duì)于可被截?cái)嗟较乱恍械男袃?nèi)元素（如span），offsetTop和offsetLeft描述的是第一個(gè)邊界框的位置（使用Element.getClientRects()來(lái)獲取其寬度和高度），而offsetWidth和offsetHeight描述的是邊界框的維度（使用Element.getBoundingClientRect來(lái)獲取其位置）。因此，使用offsetLeft、offsetTop、offsetWidth、offsetHeight來(lái)對(duì)應(yīng) left、top、width 和 height 的一個(gè)盒子將不會(huì)是文本容器 span 的盒子邊界。
3.element.scrollHeight:元素內(nèi)容的高度,包括溢出的部分.Element.scrollTop屬性可以設(shè)置或者獲取一個(gè)元素距離他容器頂部的像素距離。一個(gè)元素的scrollTop是可以去計(jì)算出這個(gè)元素距離它容器頂部的可見(jiàn)高度。當(dāng)一個(gè)元素的容器沒(méi)有產(chǎn)生垂直方向的滾動(dòng)條,那它的scrollTop 的值默認(rèn)為0.一般是整個(gè)頁(yè)面,也就是document.body.scrollTop
tips:寬度是同樣的意義.所有DOM元素都有上述3大屬性，只需要給它固定大小并設(shè)置overflow:scroll即可表現(xiàn)出來(lái).最后,要處理這些寬高的問(wèn)題,用jquery的封裝方法來(lái)處理兼容性的問(wèn)題.
