Question

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

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

这最初在页面加载时获取屏幕时起作用。但是，当用户手动更改屏幕宽度/高度时，我似乎无法获得当前尺寸，并且页面开始出现错误。我该如何检查尺寸？我试过谷歌搜索答案，但我似乎找不到任何适用的东西，虽然我确定很多其他人都有同样的问题（我不认为我在搜索正确的关键字！）。请让我知道我能做些什么!!谢谢！

Answer 1

试试这个

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

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

window.resizeTo(width, height);

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

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

希望它可以帮到你

Answer 2

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

（Resizeable Demo）

＆＃13;

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

＆＃13;

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

（Resizeable Demo）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：

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

fiddle

Answer 4

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

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

这假设height和width在函数可以访问的范围内声明。否则，请务必在每个变量前放置var。

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

4 个答案: