我正在尝试编写一个 JavaScript 函数来获取当前浏览器宽度。
我找到了这个：
console.log(document.body.offsetWidth);但是问题是如果body的宽度为100%就会失败。
还有其他更好的功能或解决方法吗？
我最初的答案是在 2009 年写的。虽然它仍然有效，但我想在 2017 年更新它。浏览器的行为仍然会有所不同。我相信 jQuery 团队在维护跨浏览器一致性方面做得很好。但是，没有必要包含整个库。在 jQuery 源代码中，相关部分位于dimension.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()undefinedvar 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默认和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 答案的重要补充；您需要将 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 变量。
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);
};
适用于所有浏览器的简单方法
窗口.innerWidth
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() );