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