小编典典

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

all

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

我找到了这个:

console.log(document.body.offsetWidth);

但它的问题是,如果身体的宽度为 100%,它就会失败。

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


阅读 61

收藏
2022-07-04

共1个答案

小编典典

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.

2022-07-04