如何使用JavaScript代码获取浏览器宽度？2017 年更新原始答案

javascript html css

2022-08-30 01:21:55

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

我发现这个：

console.log(document.body.offsetWidth);

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

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

答案 1

这是屁股上的疼痛。我建议跳过废话并使用jQuery，它可以让你做。$(window).width()

答案 2

2017 年更新

我最初的答案写于2009年。虽然它仍然有效，但我想在2017年更新它。浏览器的行为仍然可能有所不同。我相信jQuery团队在维护跨浏览器一致性方面做得很好。但是，不必包含整个库。在 jQuery 源中，相关部分位于维度的第 37 行.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