I am searching a way using javascript to find visitors browser window width and height but i want also find the maximum window sizes so if the user make the window smaller or bigger some elements change automatic position or size like facebook chat. Any suggestions ?

I am searching a way using javascript to find visitors browser window width and height but i want also find the maximum window sizes so if the user make the window smaller or bigger some elements change automatic position or size like facebook chat. Any suggestions ?

• javascript

• Have you considered using relative positioning and setting width and height based on percentage? – scott.korin Commented Mar 10, 2013 at 21:26
• 1 The maximum window size is not necessarily constrained by the physical dimensions of a user's screen. Nor will a user necessarily want a window that is as large as their maximum screen size. Consider a user with a desktop extended over two screens. It is unlikely (but possible) that they want a window over both screens. Just deal with the window you have, and use CSS, not javascript. – RobG Commented Mar 10, 2013 at 22:56

4 Answers 4

The maximum browser size width would be the width and height of the screen:

screen.height;
screen.width;

But I'd use CSS media queries for what you're trying to do:

http://css-tricks.com/css-media-queries/

Something like this would make the page background black if the window is less than 500px wide:

@media only screen and (max-width: 500px) {
  body {
    background: #000;
  }
}

Update:

Oh, and you'll want a polyfill for older browsers that don't support media queries:

https://github.com/scottjehl/Respond

That'll get you media queries all the way down through IE6!

Maximum window height is

window.screen.availHeight - (window.outerHeight - window.innerHeight)

You can use window.innerWidth and window.innerHeight

You can position any dom element relative to window using css position 'fixed' or absolute so that on window resize the will readjust itself.

You can use window.onresize to listen window resize event

jQuery equivalent

$(window).width(); $(window).height() and $(window).resize(function(){});

If you can use jQuery, it's pretty easy to set up a listener in a cross-browser fashion:

$(window).resize(function() {
  alert($(window).width()) //window width
  alert($(window).height()) //window height
}).trigger("resize") //to ensure that you do whatever you're going to do when the window is first loaded;