js和jQuery获取浏览器窗口的高度、宽度的方法详解

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

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

• window.innerHeight - 浏览器窗口可视区域的高度
• window.innerWidth - 浏览器窗口可视区域的宽度
• document.documentElement.scrollHeight-浏览器整个网页的内容高度
• document.documentElement.scrollWidth-浏览器整个网页的内容宽度
  
• document.documentElement.clientHeight-浏览器窗口可视区域的高度
• document.documentElement.clientWidth-浏览器窗口可视区域的宽度
  

当浏览器窗口缩小或放大时，上面1、2、5、6的值会随之增大或减小；而3、4则保持不变。

使用e.clientX可获取当前可视区域的横坐标；使用e.pageX可获取当前元素在整个页面中的横坐标。

备注：使用element.getBoundingClientRect();可以获取元素的宽高和位置信息

使用window.screen.height和window.screen.width可以获取电脑的分辨率，该值不会随浏览器窗口的改变而变化。

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

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

以上是通过js获取的屏幕高度和宽度，你也可以使用jQuery进行获取，如下：

$(window).width()==window.innerWidth

$(window).height()==window.innerHeight

同时，你也可以用jQuery获取DOM（文档对象模型）的高度和宽度，如下：

$(document).width()

$(document).height()

<iframe>父子窗口之间的调用，可以观看本人的博客——《通过js或jQuery,<iframe>子父窗口之间元素、方法、window的相互获取》