CSS專題（四）：頁面寬度發微

一 背景

　　書接上文，本文介紹頁面的寬度。頁面的寬度取值與頁面的高度差不多，但是有細微的區別，而這些區別，在某些應用時可能是重要的區別。與頁面高度相同，對頁面寬度，我們也將關心三個值，並且使用jQuery和javascript元素屬性來取值。關心的三個值是：

　　1.視窗寬度，指瀏覽器視窗的寬度，隨著視窗的縮放而變化；

　　2.文檔寬度，指html頁面的寬度，就是由頁面內容決定的，不隨視窗的縮放而變化；

　　3.被捲起的寬度，當瀏覽器出現水平捲軸，滾動水平捲軸時，在左邊被隱藏的距離。

下方三幅圖片分別展示：

　　　　　　　　　　　　　　　　　　　　　　　　視窗寬度

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　文檔寬度

 

　　　　　　　　　　　　　　　　　　　　　　　　被捲起的寬度

二 取值

　　通過對高度的研究，要取這三個寬度值，也可以試試看高度的取值方法，即$(window).width(),$(document).width(),$(window).scrollLeft(),可以試試看，結果讓人滿意，jQuery不負眾望，表現良好，這個取值方法能真實反映三個寬度值。

　　因此，我們就用這三個值吧，好記，與高度取值方法統一。即：

 

　　1.視窗寬度，$(window).width()

 

　　2.文檔寬度，$(document).width()

 

　　3.被捲起的寬度，$(window).scrollLeft()　　

　　本文闡述的與高度的差距，主要是body的寬度。我們知道，在確定高度的時候，$(document.docmentElement),$(document),$(document.body)都能反映文檔的高度，但是，只有$(document).width()能反映文檔的寬度。經過我的測試，$(document.documentElement),$(document.body)都反映視窗寬度，令人費解。並且，原生的javascript的取值更加詭異，根本就不可靠，在各瀏覽器下更糟糕。

　　如果給body設定背景顏色，那麼整個文檔都會著上該顏色，當拖動水平捲軸，還是這個顏色，但是body的寬度卻比較小，似乎是個矛盾。比如，文檔的寬度有1600px,給body設定了背景顏色，這時寬度1600px都會著上改色，可是body.width,$(body).width()都是當時視窗的寬度。這說明，body的寬度不可信。

　　document.documentElement即html的寬度也與我們料想的不同，而與body的表現相似。所以也不可信，不可取。

三 樣本

　　本文的所有樣本在：http://www.zangb.com/html/demo/css/css_pageWidth.html

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　方勁松 南京焦點科技 寫於鼓樓清涼山 2012-8-16