Get constant browser height and width

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!

I think you might be able to listen for window resize events and query the height/width then. See http://stackoverflow.com/questions/641857/javascript-window-resize-event — aaron-prindle, Aug 04 '15 at 19:11
I feel caputring `outerWidth` would be a better option to resize the window based on this value. — Jop.pop, Aug 04 '15 at 19:17
Do you think any of this would work if in my CSS file, I have declared the divs with a `position:absolute` ? Or does that make it so that the divs cannot fit the appropriate size when a user manually changes the size of the screen? — trynacode, Aug 04 '15 at 21:00

score 6 · Accepted Answer · 2015-08-04T19:44:08.647

6

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>

edited Aug 04 '15 at 19:44

answered Aug 04 '15 at 19:29

Thanks. This seems like the best shot, as I've heard you shouldn't override the resize function. – trynacode Aug 04 '15 at 21:01
1

Listening to the resize event is fine, you just don't want to do any intensive things like manipulating the DOM. You won't cause any problems by simply querying the window size and storing it in variables without instantiating any new objects. – Aug 04 '15 at 21:03

score 2 · Answer 2 · answered Aug 04 '15 at 19:12

2

Try this:

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

fiddle

answered Aug 04 '15 at 19:12

brroshan

1,640
17
19

score 2 · Answer 3 · answered Aug 04 '15 at 19:16

2

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

answered Aug 04 '15 at 19:16

Jop.pop

335
4
18

score 1 · Answer 4 · answered Aug 04 '15 at 19:13

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.

Get constant browser height and width

4 Answers4