180

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

我发现了这个：

javascript:alert(document.body.offsetWidth);

但是它的问题是如果身体的宽度为100％，它将失败。

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

— 阿姆·埃尔加希（Amr Elgarhy）
source

133

2017年更新

我的原始答案写于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。

— 特拉维斯
source

11

最佳答案，因为我不必包括33K库基于浏览器窗口宽度的简单的重定向

— 大卫·阿吉雷

1

与jQuery的实现相比，这将始终产生正确的（或预期的）结果。

— 伊曼纽尔·约翰

3

...这三个结果均显示出一些结果，所有结果（宽度）都不相同。例如谷歌浏览器看到self.innerWidth 423，document.documentElement.clientWidth 326和document.body.clientWidth 406。在这种情况下，问题：哪个正确，使用哪个？例如，我想调整谷歌地图的大小。326或423大不相同。如果宽度〜700，则参见759、735、742（相差不大）

— Andris

1

@ user2118559

var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);

和var windowWidth = self.innerWidth || -1;//因为“正文”，“屏幕”或“文档”，如果您检查可以理解的html内容，则不是“窗口”。＃i.stack.imgur.com/6xPdH.png

— 阿卜杜拉·艾登

1

示例中的复制粘贴错误，函数getWidth()引用self.innerHeight

— theGecko

309

这是一个痛苦的屁股。我建议跳过废话，而使用jQuery，这使您可以做到$(window).width()。

— 混沌
source

2

如果我没记错的话，jQuery已经将很多方面纳入了核心。您仍然需要尺寸来完成您的建议吗？

— Nosredna，2009年

原来你不知道。太棒了修改后的答案感谢您的单挑。

— 混沌

6

jQuery中的$（window）.width（）支持自1.2版开始，以防与任何人相关。

— 混沌

18

我发现$（window）.width（）并不总是根据下面答案中的示例返回与innerWidth / clientWidth相同的值。jQuery的版本不考虑浏览器滚动条（无论如何都是FF）。这使我对CSS @media查询似乎以错误的宽度触发时感到困惑。使用本机代码似乎更可靠，因为它考虑了滚动条的外观。

— 编码员

5

添加30k行代码以获取窗口宽度是一个糟糕的解决方案！

— codechimp

49

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（）的无效值

— 布拉德利洪水
source

1

无法在Safari iphone上使用此功能。

— 珠穆朗玛峰

17

为什么没人提到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 default和android chrome浏览器，台式机chrome进行了测试，到目前为止看起来效果很好。

当然，它不返回数字值，而是返回布尔值-如果匹配或不匹配，则可能不完全适合该问题，但这仍然是我们想要的，而且可能是问题的作者想要的。

— 大流士
source

1

仅支持IE10 +。

— qarthandso

17

如果他们使用IE9或更早版本，则不应该使用Internet。

— Darius.V

Safari iphone似乎不支持此功能。

— 珠穆朗玛峰

较新的iOS Safari版本应支持matchMedia。资料来源：caniuse.com/#feat=matchmedia

— Vargr，

8

从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>

— 用户名
source

该方法效果很好，可以被接受，因为它比任何其他解决方案都短（除了使用jQuery外）。

— 西蒙·斯坦伯格2015年

2

如果document.documentElement未定义，是否会抛出错误？

— PhiLho

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;
}

— 伊斯梅尔
source

4

如果所有条件均为假，则无法返回值。

— Mike C

10

您不需要其他:)

— Nick

0

一种针对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);
};

— 塞尔久
source

0

特拉维斯答案的重要补充；您需要将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变量。

— 布库尔
source

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

2017年更新

原始答案