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

 

posted @ 2012-08-16 23:35 Fangjins 阅读(...) 评论(...) 编辑 收藏