来源：http://www.ido321.com/906.html

在w3school关于window对象的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

对于 Internet Explorer 8、7、6、5：

或者

实用的 JavaScript 方案（涵盖所有浏览器）：

   1: var w=window.innerWidth

   2: || document.documentElement.clientWidth

   3: || document.body.clientWidth;

   4:

   5: var h=window.innerHeight

   6: || document.documentElement.clientHeight

   7: || document.body.clientHeight;

返回的都是数值，不带单位。这是共同点。好，接下来，看看他们的区别

   1: html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2: 

   3: 

   4: 
  

   5: 

   6: 

  19: 

  20:

  21: 

  22: 
  

   test
  

  23: 
  

  24: 

  25: 

js代码

   1: var w=window.innerWidth

   2: || document.documentElement.clientWidth

   3: || document.body.clientWidth;

   4: var h=window.innerHeight

   5: || document.documentElement.clientHeight

   6: || document.body.clientHeight;

   7:

   8: var data = document.getElementById('data');

   9: data.innerHTML = "正常文档流情况："+"
";

  10: data.innerHTML += "w="+w+"
";

  11: data.innerHTML += "h="+h+"
";

  12: data.innerHTML += "document.body.clientHeight="+document.body.clientHeight+"
";

  13: data.innerHTML += "document.body.clientWidth="+document.body.clientWidth+"
";

  14: data.innerHTML += "window.innerWidth="+window.innerWidth+"
";

  15: data.innerHTML += "window.innerHeight="+window.innerHeight+"
";

  16: data.innerHTML += "document.documentElement.clientHeight="+document.documentElement.clientHeight+"
";

  17: data.innerHTML += "document.documentElement.clientWidth="+document.documentElement.clientWidth+"
";

看看结果输出：（ps：电脑分辨率是1366*768）

给.test添加左浮动：float:left，让其脱离正常文档流，看看结果：

java script中的*top、*left、*width、*Height详解：http://www.ido321.com/911.html