窗口大小

一  窗口（Window) 大小，即浏览器的窗口大小

1 outerWidth, outerHeight

Safari,Firefox,Chrome中 outerWidth和outerHeight 返回浏览器窗口本身的尺寸。

方法：window.outerWidth, window.outerHeight

2 IE没有提供，Opera呢？

看jQuery有没有提供这个兼容写法。

 

二  视口（Viewport）大小

视口网页内容可显示区域的大小，这个比较常用，如响应式设计，计算出视口的大小看效果是否符合。

一个代码例子展示一下。

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;

if (typeof pageWidth != "number") {
   // 判断是否是标准模式
   if (document.compatMode == "CSS1Compat" ) {
      pageWidth = document.documentElement.clientWidth;
      pageHeight = document.documnetElement.clientHeight;  
   } else {
      pageWidth = document.body.clientWidth;  
      pageHeight = document.body.clientHeight;
   }  
}

document.compatMode IE6率先先加入的，现在Firefox,Opera，Chrome，Safari都有了。

唯一作用：标志浏览器处于什么模式。

值CSS1Compat表示标准模式，BackCompat表示混杂模式。

三 调整浏览器窗口的大小

resizeTo(), resizeBy()

resizeTo(x, y) 调整到x,y大小。

resizeBy(x, y) x,y 是新窗口与原窗口宽度和高度之差。

三 调整窗口大小

 

四 jQuery获取尺寸的方法

jQuery中获取尺寸有三个分类，height, innnerHeight, outerHeight

height 元素高度

innerHeight = height+padding

outerHeight = innerHeight+border

实例：

$(window).height() 可视窗口的高度，即前面的视口(Viewport)大小。

$(document).height() 当前文档的高度，即这个页面所有内容的高度。