2017年更新

Question

我正在尝试编写一个JavaScript函数来获取当前的浏览器宽度。

我找到了这个：

javascript:alert(document.body.offsetWidth);

但问题是如果身体的宽度为100％则会失败。

还有其他更好的功能或解决方法吗？

Answer 1

这是一个pain in the ass。我建议跳过废话并使用jQuery，这样您就可以$(window).width()。

Answer 2

2017年更新

我的原始答案是在2009年写的。虽然它仍然有效，但我想在2017年更新它。浏览器仍然可以表现不同。我相信jQuery团队在维护跨浏览器一致性方面做得很好。但是，没有必要包含整个库。在jQuery源代码中，相关部分位于line 37 of dimensions.js。在这里，它被提取和修改为独立工作：

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。

Answer 3

var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

两者都返回整数，不需要jQuery。跨浏览器兼容。

我经常发现jQuery为width（）和height（）

返回无效值

Answer 4

为什么没有人提到matchMedia？

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

没有测试那么多，但测试了Android默认和Android Chrome浏览器，桌面铬，到目前为止看起来它运作良好。

当然它没有返回数字值，但是返回布尔值 - 如果匹配与否，那么可能不完全符合问题，但这正是我们想要的，可能是问题的作者想要的。

Answer 5

从W3schools及其跨浏览器回到IE的黑暗时代！

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

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

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

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>

Answer 6

以下是上述功能的缩写版本：

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

Answer 7

Travis的答案的现代JS的适应解决方案：

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};

Answer 8

特拉维斯答案的重要补充；您需要将getWidth（）放在文档主体中，以确保计算了滚动条的宽度，否则从getWidth（）中减去浏览器的滚动条的宽度。我做了什么；

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

然后在任何地方调用aWidth变量。

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

8 个答案:

2017年更新

原始答案