有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）。
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
窗口顯示區(qū)（可視區(qū)域）的寬度和高度，包括滾動(dòng)條。
window.innerHeight - IE不支持該屬性，IE中body元素的clientHeight屬性與該屬性相同。window.innerWidth – IE不支持該屬性，IE中body元素的clientWidth屬性與該屬性相同。
對于 Internet Explorer 8、7、6、5：
窗口顯示區(qū)（可視區(qū)域）的寬度和高度，不包括滾動(dòng)條區(qū)域。
document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth
對于元素寬度尺寸的獲取，jquery提供了width方法。
對于文檔級(jí)非普通元素window，document的寬度獲取
$(window).width() 代表了當(dāng)前瀏覽器可見區(qū)域的寬度 $(document).width() 則代表了整個(gè)文檔的寬度，可以有滾動(dòng)內(nèi)容
window 反映的是視圖窗口，沒有用window.innerWidth(包括滾動(dòng)條區(qū)域)，而是采用window.document.documentElement.clientWidth（不包括滾動(dòng)條區(qū)域），document是反映了實(shí)際內(nèi)容區(qū)間，那么可以存在溢出滾動(dòng)，所以就是：
document.documentElement.scrollWidth document.body.scrollWidth
由于兼容問題就取2者之中的最大值。
.width()是我們經(jīng)常應(yīng)用獲取對象寬度的方法，但是就Query為了做這個(gè)兼容可不是表面上那么簡單的，首先整理下涉及到元素寬度處理,我們需要考慮的因素。
1 元素的寬素可以是內(nèi)聯(lián)或者通過link定義,所以通過style是不可取的 2 元素在隱藏狀態(tài)下是不能獲取任何尺寸的 display:none 3 CSS3引入了box-sizing的設(shè)置
我們看看jquery如何處理的：
width，height在內(nèi)部最終調(diào)用的是jQuery.css(elem, type, extra)方法，jQuery.css是最終的一個(gè)針對所有CSS處理的接口，我們放在下一章，這里我們只涉及width與height的獲取。
display:none的狀態(tài)下是無法獲取元素的尺寸的，所以jQuery在最開始之前必須要檢測下這個(gè)狀態(tài)，這個(gè)處理是通過鉤子jQuery.cssHooks['widht'].get方法調(diào)用的：
/^(none|table(?!-c[ea]).+)/test(jQuery.css(elem, "display")) //代碼很簡單通過判斷得到的值
當(dāng)檢測到是none的情況下，就要把display置為block？不行這樣就改變了布局的原意了，本來就是隱藏的。jQuery就會(huì)對元素增加position: absolute; visibility: hidden;這樣的屬性達(dá)到display:none的效果，因?yàn)樵?code class="marker">visibility: hidden的情況下，是可以獲取到值的，只是對于用戶不可見而已。
獲取元素的尺寸值我們有offsetWidth,與offsetHeight,大多情況下是夠用了，但是有一種情況如果元素采用boxSizing處理，所以jQuery還要對BorderBox情況的檢測，如果如果是采用了border-box樣式的話，針對值的獲取還要減去padding,border，這又是一個(gè)相當(dāng)繁瑣的過程，我們在之前就提到過這個(gè)過程的處理了。
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)
