如何使用JavaScript代码获取浏览器宽度？

更新

我的原始答案写于2009年。尽管它仍然有效，但我想在2017年进行更新。浏览器的行为仍然有所不同。我相信jQuery团队在保持跨浏览器的一致性方面做得很好。但是，没有必要包括整个库。在jQuery源代码中，相关部分位于Dimensions.js的第37行。在这里，将其提取并修改为独立工作：

function getWidth() {  return Math.max(    document.body.scrollWidth,    document.documentElement.scrollWidth,    document.body.offsetWidth,    document.documentElement.offsetWidth,    document.documentElement.clientWidth  );}function getHeight() {  return Math.max(    document.body.scrollHeight,    document.documentElement.scrollHeight,    document.body.offsetHeight,    document.documentElement.offsetHeight,    document.documentElement.clientHeight  );}console.log('Width:  ' +  getWidth() );console.log('Height: ' + getHeight() );

原始答案

由于所有浏览器的行为都不同，因此您需要先测试值，然后再使用正确的值。这是一个为您执行此操作的函数：

function getWidth() {  if (self.innerWidth) {    return self.innerWidth;  }  if (document.documentElement && document.documentElement.clientWidth) {    return document.documentElement.clientWidth;  }  if (document.body) {    return document.body.clientWidth;  }}

以及类似的高度：

function getHeight() {  if (self.innerHeight) {    return self.innerHeight;  }  if (document.documentElement && document.documentElement.clientHeight) {    return document.documentElement.clientHeight;  }  if (document.body) {    return document.body.clientHeight;  }}

使用

getWidth()

getHeight()

undefined