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

Question

我想知道如何不断获取当前浏览器的高度和宽度。现在，我正在使用 jQuery 并且有这样的东西:

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

这最初确实有效，因为它会在页面加载时获取屏幕。但是，当用户手动更改屏幕宽度/高度时，我似乎无法获得当前尺寸并且页面开始出现错误。我应该如何始终检查尺寸？我试过用谷歌搜索答案，但我似乎找不到任何适用的东西，尽管我确信很多其他人也有同样的问题(我认为我没有在搜索正确的关键字!)。请让我知道我能做什么!!谢谢!

Answer 1

使用 window.onresize 函数以及 window.onload 处理程序来更新宽度和高度变量。

( Resizeable Demo )

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

---

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

( Resizeable Demo )

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>