window與document的這些屬性的值會(huì)不太兼容，會(huì)在后面補(bǔ)充說妒茬。
一下效果展示忽略IE9之前瀏覽器束倍，主要考慮主流瀏覽器與手機(jī)端的效果。
- 可以獲得寬度與高度的屬性
-
clientHeight 與clientWidth 指元素的客戶區(qū)大小乱顾，即 可見內(nèi)容區(qū)+padding
#t1{
width: 100px;
height: 100px;
border: 4px solid yellowgreen;
background: yellow;
padding: 10px;
}
div.clientWidth+';'+div.clientHeight;
120=width(100)+padding(10)*2;
不加邊框板祝，當(dāng)內(nèi)容溢出或者出現(xiàn)滾動(dòng)條時(shí)的寬度與高度都不會(huì)算在內(nèi)。
是dom對(duì)象的可見寬度走净，這里的可見是針對(duì)設(shè)置overflow: scroll;后部分內(nèi)容隱藏而說的券时。 -
offsetHeight與offsetWidth 是元素的外在大小，即 border +padding+可見內(nèi)容區(qū)
div.offsetWidth+';'+div.offsetHeight
128 = width(100)+padding(10)2+border(4)2
上圖內(nèi)容區(qū)溢出隱藏伏伯，是因?yàn)樵O(shè)置了overflow: scroll;才會(huì)有這樣的現(xiàn)象橘洞。 -
scrolWidth與scrollHeight是元素的實(shí)際大小，即 實(shí)際內(nèi)容區(qū)+padding
div.scrollWidth+';'+div.scrollHeight
以上這三對(duì)屬性都是針對(duì)dom元素的说搅，可以測(cè)得元素的寬度炸枣，但是，細(xì)心的會(huì)發(fā)現(xiàn)弄唧，以上三種并沒有提供獲得width（100）的方法适肠，所以可以使用window.getComputedStyle(div,null).getPropertyValue('width');
這樣獲得就是100。
其實(shí)比較難理解的是像window候引、document.body侯养、document. documentElement這兩個(gè)dom對(duì)象在獲得他們的寬度時(shí)會(huì)有各種問題。
現(xiàn)在開始撕一下這其中的神奇澄干。沸毁。。
-
document.body與document. documentElement
前者是body傻寂，后者是html息尺。但是現(xiàn)在大家都習(xí)慣將元素默認(rèn)的padding與margin設(shè)置為0，這樣無論是通過以上兩種誰去訪問clientWidth都是一樣的值（電腦端一致）疾掰。
但是手機(jī)端訪問這兩個(gè)值的時(shí)候會(huì)隨著由于是客戶端搂誉，我們會(huì)對(duì)網(wǎng)頁的meta標(biāo)簽做一些設(shè)置，然后通過這兩個(gè)對(duì)象訪問的屬性的值就不一樣静檬。但是由于body是html的子標(biāo)簽炭懊，所以獲得可視窗口（clientWidth）的大小，建議使用后者document. documentElement.clientWidth拂檩。
document對(duì)象有個(gè)屬性compatMode ,它有兩個(gè)值：
BackCompat 對(duì)應(yīng)quirks mode
CSS1Compat 對(duì)應(yīng)strict mode
IE6以前的瀏覽器就是第一種渲染模式侮腹，導(dǎo)致IE6要是想獲得可視窗口（clientWidth）時(shí)，必須使用document.body.clientWidth這個(gè)來訪問稻励。IE6我實(shí)習(xí)的公司已經(jīng)放棄啦父阻。
綜上：拋棄document.body的用法愈涩，使用document. documentElement。
-
window.innerWidth與document. documentElement.clientWidth用哪個(gè)加矛？
接下來說的是不為網(wǎng)頁添加meta標(biāo)簽的效果履婉，添加標(biāo)簽的我覺得應(yīng)該另外寫一篇，因?yàn)闀?huì)涉及到自適應(yīng)的知識(shí)斟览。
我做了再安卓機(jī)瀏覽器毁腿，iPhone的safari瀏覽器以及這兩種手機(jī)內(nèi)微信內(nèi)訪問網(wǎng)頁運(yùn)行的qq瀏覽器的測(cè)試。
測(cè)試結(jié)果肯定是不統(tǒng)一的苛茂。
測(cè)試前提：不為頁面設(shè)置固定的寬度已烤，不設(shè)置meta標(biāo)簽。
測(cè)試結(jié)果：
| 屬性 | 安卓機(jī) | iphone |
|---|---|---|
| window.innerWidth | 980px | 980px |
| ..clientWidth | 980px | 980px |
| 屬性 | 安卓機(jī)微信 | iphone微信 |
|---|---|---|
| window.innerWidth | 320px | 980px |
| ..clientWidth | 980px | 980px |
總是會(huì)有搗蛋鬼妓羊。胯究。。
綜上：如果想要獲得手機(jī)端頁面的可視寬度侍瑟，建議使用
document. documentElement.clientWidth
在下一篇唐片，筆記中，會(huì)對(duì)這個(gè)屬性在meta標(biāo)簽的不同設(shè)置下的值進(jìn)行分析涨颜。
BTW：我又回來费韭，好好學(xué)習(xí)啦！
