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

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

我找到了这个:

console.log(document.body.offsetWidth);

But its problem that it fail if the body has width 100%.

Is there any other better function or a workaround?

316554 次浏览

它是讨厌鬼。我建议跳过这些无意义的内容,使用jQuery,它可以让你只做$(window).width()

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

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

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

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

为什么没有人提到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匹配与否,所以可能不完全符合问题,但这是我们想要的,可能是问题的作者想要的。

一个适应的解决方案,现代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>

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

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