CODEWITHSUNDEEP
javascript
alexalikiotis
alexalikiotis

Reputation: 189

How to find using javascript the maximum users browser window width and current

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 ?

Upvotes: 7

Views: 27910

Answers (4)

Sarah-Jane
Sarah-Jane

Reputation: 153

Maximum window height is

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

Upvotes: 6

lmortenson
lmortenson

Reputation: 1605

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;

Upvotes: 1

alt
alt

Reputation: 13907

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!

Upvotes: 12

Anoop
Anoop

Reputation: 23208

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

Upvotes: 2

Related Questions