获取恒定的浏览器高度和宽度

Question

我想知道如何不断获取当前浏览器的高度和宽度。 现在，我正在使用jQuery并具有以下内容：

var height = window.innerHeight;
var width = window.innerWidth;

最初在页面加载时它会获得屏幕，因此它确实起作用。 但是，当用户手动更改屏幕宽度/高度时，我似乎无法获取当前尺寸，并且页面开始出现错误。 我应该如何一直检查尺寸？ 我已经尝试过搜索答案，但似乎无法找到任何适用的方法，尽管我确定许多其他人也遇到了同样的问题（我不认为自己正在寻找正确的关键字！）。 请让我知道我能做什么！ 谢谢！

Answer 1

使用window.onresize函数以及window.onload处理函数来更新width和height变量。

（ 可调整大小的演示 ）

 var width,height; window.onresize = window.onload = function() { width = this.innerWidth; height = this.innerHeight; document.body.innerHTML = width + 'x' + height; // For demo purposes } 

---

使用jQuery对象，它看起来像这样。

（ 可调整大小的演示 ）

 var width,height; $(window).on('load resize', function() { width = this.innerWidth; // `this` points to the DOM object, not the jQuery object height = this.innerHeight; document.body.innerHTML = width + 'x' + height; // For demo purposes }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

尝试这个：

$(window).on("resize",function(){
    console.log($(this).height() + " " + $(this).width());
});

小提琴

Answer 3

尝试这个

var width = window.outerWidth;
var height = window.outerHeight;

要调整当前窗口的大小，请使用

window.resizeTo(width, height);

您可以使用以下方法触发调整大小功能：

$( window ).resize(function() {
   //....
});

希望对您有帮助

Answer 4

您可以使用它来检测屏幕尺寸的变化：

$(window).resize(function() {
  height = window.innerHeight;
  width = window.innerWidth;
  //other code you wish to run on screen size change;
});

假定height和width是在函数可以访问的范围内声明的。 否则，请确保将var放在每个变量之前。