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

How to get browser width using JavaScript code?


如何使用JavaScript代码获取浏览器宽度? 已获得8个解决方法 2020-08-18 18:07:34 javascript

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

我发现了这个:

javascript:alert(document.body.offsetWidth);

但是它的问题是,如果身体有100% 的宽度,它就会失败.

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


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

2017年更新

我最初的答案是2009年写的.虽然它仍然有效,但我想在2017年更新它.浏览器仍然可以有不同的行为.我相信jQuery团队在保持跨浏览器一致性方面做得很好.但是,不必包含整个库.在jQuery源中,相关部分位于dimensions.js第37行.在这里,它被提取和修改为独立工作:

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 var a = ~fruits.indexOf("Banana");
 var b = !a;
 var c = !!a;
 console.log('a:',a);
 console.log('b:',b);
 console.log('c:',c); 

原始答案

由于所有浏览器的行为都不同,因此您需要首先测试值,然后使用正确的值.这里有一个为你做这个的函数:

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 .


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

真是讨厌鬼.我建议跳过废话,使用jQuery ,这样你就可以做 $(window).width() .


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

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


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

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

当然,它不返回数字值,但返回布尔值-如果匹配与否,所以可能不完全适合这个问题,但这就是我们想要的,可能是问题的作者想要的.


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

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

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

这是上面介绍的函数的一个较短版本:

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

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

特拉维斯回答的现代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);
};

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

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>

然后在任何地方调用宽度变量.


.htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation