144

我想写一个JavaScript函数来获取当前的浏览器宽度。如何使用JavaScript代码获取浏览器宽度？

我发现这一个：

javascript:alert(document.body.offsetWidth);

但它如果身上有宽度100％，它失败的问题。

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

来源

2009-06-24 Amr Elgarhy

286

这是一个pain in the ass。我建议跳过废话并使用jQuery，这可让您只需执行$(window).width()。

来源

2009-06-24 14:32:58 chaos

如果我正确回想起来，jQuery已经将很多维度拉入核心。你还需要维度来做你的建议吗？ – Nosredna 2009-06-24 14:41:51

原来你没有。这真棒。编辑答案。感谢您的提醒。 – chaos 2009-06-24 14:43:55

jQuery中的$（window）.width（）支持自1.2版本开始，以防与任何人相关。 – chaos 2009-06-24 14:44:46

2017年

我原来的答案写于2009年虽然它仍然有效，我想更新它的浏览器2017年仍然可以表现不同更新。我相信jQuery团队在维护跨浏览器一致性方面做得非常出色。但是，没有必要包括整个图书馆。在jQuery源代码中，相关部分位于line 37 of dimensions.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; 
    } 
}

，同样的高度：用getWidth()或getHeight()

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

调用这两个在脚本中。如果没有定义浏览器的本地属性，它将返回undefined。

来源

2009-06-24 14:36:02 Travis

这里是上面介绍的功能的一个较短的版本：

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 ismael

var w = window.innerWidth; 
var h = window.innerHeight; 
var ow = window.outerWidth; //including toolbars and status bar etc. 
var oh = window.outerHeight;

都返回整数，不需要jQuery的。跨浏览器兼容。

我经常发现的jQuery的宽度（）和高度（）

来源

2014-02-13 00:52:33

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

来源

2015-01-14 07:34:34 user3651121

为什么没有人提到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默认和android chrome浏览器，桌面chrome，到目前为止它看起来好像运行良好。

当然，它不返回数值，但返回布尔值 - 如果匹配或不匹配，所以可能不完全符合问题，但这就是我们想要的，也许是问题的作者想要的。

来源

2015-05-27 06:47:21

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

回答

2017年

原来的答案

相关问题