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