Browser size (width and height)

Question

I'm trying to detect the browser's current size (width and height). I know it's super easy in jQuery with $(document).width and $(document).height, but I don't want to add the size of the jQuery lib to the project, so I'd rather just use built in JavaScript. What would be the short and efficient way to do the same thing with JavaScript?

This has been answered quite well in: http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-protot — vsync, Mar 23 '10 at 14:32

Joel · Accepted Answer · 2010-03-23T14:46:07.197

91

// first get the size from the window
// if that didn't work, get it from the body
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}

edited Mar 23 '10 at 14:46

answered Mar 19 '10 at 00:10

Joel

19,175
2
63
83

body size is not the same as window size, which it the desired one actually. – vsync Mar 23 '10 at 14:29
4

This can be optimized using short circuit operators. ex: `width: window.innerWidth || document.body.clientWidth` – Peter Di Cecco Mar 23 '10 at 14:36
@vsync, that is true, but window size is not defined by all browsers. @Peter, good point. I'll update that. – Joel Mar 23 '10 at 14:45

kennebec · Answer 2 · 2010-03-19T02:47:20.827

function getWindowSize(){
 var d= document, root= d.documentElement, body= d.body;
 var wid= window.innerWidth || root.clientWidth || body.clientWidth, 
 hi= window.innerHeight || root.clientHeight || body.clientHeight ;
 return [wid,hi]
}

IE browsers are the only ones who don't use innerHeight and Width.

But there is no 'standard'- just browser implementations.

Test the html (document.documentElement) clientHeight before checking the body- if it is not 0, it is the height of the 'viewport' and the body.clientHeight is the height of the body- which can be larger or smaller than the window.

Backwards mode returns 0 for the root element and the window (viewport) height from the body.

Same with width.

score 3 · Answer 3 · answered Apr 14 '13 at 06:16

3

Here is a code sample

function getSize(){

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight ||document.body.clientHeight;


}

answered Apr 14 '13 at 06:16

Sriwantha Attanayake

7,694
5
42
44

score 3 · Answer 4 · answered Mar 18 '10 at 23:24

3

Try this;

 <script type="text/javascript"> 
winwidth=document.all?document.body.clientWidth:window.innerWidth; 
winHeight=document.all?document.body.clientHeight:window.innerHeight; 
alert(winwidth+","+winHeight);
</script>

answered Mar 18 '10 at 23:24

Enrique

9,920
7
47
59

1

You shouldn't use a browser check like `document.all` instead check that clientWidth is not undefined. – Joel Mar 18 '10 at 23:27
@Joel, Why not, can you please contribute your answer. Thanks – dono Mar 18 '10 at 23:47
4

Just because a browser does or does not implement `document.all` does not mean it does or does not implement `document.body.clientHeight`. You should check the property you want, not an unrelated property. – Joel Mar 19 '10 at 00:04
that gives the body height, not the browser height. – vsync Mar 23 '10 at 14:29

score 2 · Answer 5 · answered Jul 12 '12 at 20:52

My case use for window.innerWidth involved building a custom modal pop up window. Simply put, the user clicks the button, the pop up opens centered in the browser and there is a transparent black bkgd behind the pop up. My issue was finding the width and height of the browser to create the transparent bkgd.

The window.innerWidth works great to find the width but remember window.innerWidth and window.innerHeight do not compensate for the scroll bars, so if your content goes beyond the visible content area. I had to subtract 17px from the value.

transBkgd.style.width = (window.innerWidth - 17) + "px";

Since the content of the site always went beyond the visible height I couldnt use window.innerHeight. If the user scrolled down the transparent bkgd would end at that point and that just looked nasty. In order to maintain the transparent bkgd all the way to the bottom of the content I used document.body.clientHeight.

transBkgd.style.height = document.body.clientHeight + "px";

I Tested the pop up in IE, FF, Chrome, and it looks good across the board. I know this doesnt follow the original question too much but I figure it might help if anyone else runs into the same issue when creating a custom modal pop up.

Browser size (width and height)

5 Answers5

Linked

Related