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

我试图写一个JavaScript函数，以获得当前的浏览器宽度。

我找到了这个:

console.log (document.body.offsetWidth);

但问题是，如果主体宽度为100%，它就会失败。

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

当前回答

一个适应的解决方案，现代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);
};

2019-12-27 08:27:25

其他回答

这是特拉维斯回答的重要补充;你需要把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>

然后在任意位置调用width变量。

2019-12-29 14:43:33

为什么没有人提到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 */
}

没有测试那么多，但测试了安卓默认和安卓chrome浏览器，桌面chrome，到目前为止，它看起来工作得很好。

当然它不返回number value，而是返回boolean - if匹配与否，所以可能不完全符合问题，但这是我们想要的，可能是问题的作者想要的。

2015-05-27 06:47:21

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

2014-02-13 00:52:33

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() );

2021-10-26 17:47:52

下面是上面函数的一个简短版本:

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

2012-06-06 16:26:59

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

推荐文章

最新文章

标签