霜月枫桥
霜月枫桥

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()