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

Question

I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:

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

This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!

Answer 1

Use a window.onresize function as well as a window.onload handler to update the width and height variables.

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

---

Using jQuery objects it would look like this.

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

Answer 2

Try this:

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

fiddle

Answer 3

Try this

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

To resize the current window, use

window.resizeTo(width, height);

You can trigger the resize function using:

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

Hope it helps you

Answer 4

You can use this to detect a change in screen size:

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

This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.