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

2020/10/20 18:21 · javascript ·  · 0评论

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

我发现了这个:

javascript:alert(document.body.offsetWidth);

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

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

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

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

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()的无效值

为什么没人提到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进行了测试,到目前为止看起来效果很好。

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

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

这是上面介绍的函数的简化版本:

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

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

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

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptdaimahuoquliulanqikuandu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!