He has all the virtues I dislike and none of the vices I admire. Sir Winston Churchill (1874-1965)


Get viewport size (width and height) with javascript

While finding out monitor resolution with javascript can be useful for statistics and certain other applications, often the need is to determine how much space is available within the browser window.

Space within the browser window is known as the 'viewport' affected by the monitor resolution, how many toolbars are in use within the browser and whether the browser is in full screen or windowed mode.

The method to get this size is different with IE6 and below to Opera and Mozilla and its variants (no surprises there!). Unfortunately, there's no way to get the viewport information in 'quirks mode' with IE6 (see this article to find out how to ensure standards compliant mode in IE).

The script below will store the viewport width and height in the variables viewportwidth and viewportheight and write them to the page.

The long version

<script type="text/javascript">
<!--

 var viewportwidth;
 var viewportheight;
 
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 // older versions of IE
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>

The Script in Action

Shorter versions

Various commenters have proposed shortened versions of the code.

As a function (thanks to Bryan Price):

<script type="text/javascript">
<!--
function viewport()
{
var e = window
, a = 'inner';
if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>

Just return variables (thanks to elstcb). This leaves the width in variable x and the height in variable y.:

<script type="text/javascript">
<!--
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
//-->
</script>

12.04.2007. 19:27

ciacob said on 29.04.2007. 14:07

thanks

Ferry Meidianto said on 05.05.2007. 12:38

Thanks. It's fully help me.

Eric S said on 19.06.2007. 21:58

This was precisely what I have needed! Thanks

Edusie said on 27.06.2007. 19:39

Good tip!

Zuquirio said on 03.07.2007. 21:40

Thanks a lot!

Jonathan Rochkind said on 04.09.2007. 19:11

Hmm, it seems to not work in an IE6 window in standards compliant mode, if the window has a frameset in it? I can't figure out what's going on.

Amit said on 25.09.2007. 09:49

Thanks a Lot

Escoffie said on 28.10.2007. 20:56

That's great! Just what I needed.
Question: It is possible to update this when the user changes the viemport size? Because it seems that works only on load.

Andy said on 30.10.2007. 21:04

You can use window.onresize to trigger the check - I would wrap the original in a function first.

Christian said on 14.11.2007. 10:46

one problem still remains: if you are in an iframe that is, lets say 2000px high (at least higher than your browser window) how can you find out how high the visible area is? any ideas?

cheers,
Christian

Kvj said on 11.12.2007. 07:46

Thanks, it was very userful

Kev said on 31.12.2007. 17:29

Just fabulous! been searching for this like crazy!

Khurram Adeeb Noorani said on 01.01.2008. 08:06

Works fine in Firefox but doesn't work in IE-7 ... following error occured when i executed this code in IE-7

document.getElementsByTagName(...)[0].clientWidth is null or not an object

could u plz fix it ??

Niyaz PK said on 16.01.2008. 06:23

Thanks for the code.
I will probably use this code for an app in my site.

alohci said on 14.02.2008. 00:49

This is good, but there's a trap in Opera 9 to watch out for. If the user zooms the page, Opera uses two different pixel sizes. clientWidths are measured in virtual pixels, innerWidth in real pixels. [Presumably ditto for Heights but I haven't checked] So, depending on what you are using the Viewport size for, the measurements may not be comparible.

Aleksandar said on 05.03.2008. 13:49

document.documentElement.clientWidth in IE6 does not work properly. It includes the size of the vertical scrollbar which is always visible, thus making this value unusable for setting an element width that should span entire viewport.

I don't have a solution for that yet.

matt ames said on 03.04.2008. 10:09

Thanks for this. Just what I was after.

Cheers,
Matt

Zingende Sjonnie said on 26.05.2008. 11:44

Thanks man!!!!!!

Samir said on 11.06.2008. 08:41

Guys, anyone knows how to get thw whole window size (Not just the content area) in Safari and FireFox? I managed to get it working in IE and Opera!!!
Any help is greatly appreciated

Andy said on 12.06.2008. 18:49

When you say window size, do you mean including the browser 'chrome'?

Bryan Price said on 20.06.2008. 22:08

This would be shorter:

function viewport()
{
var e = window
, a = 'inner';

if ( !( 'innerWidth' in window ) )
{
a = 'client';
e = document.documentElement || document.body;
}

return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}

Chiranjeevi said on 23.06.2008. 07:04

WOW It really Helped me i have no problems with mozilla but IE is pulling me back to some other methods which are still confusion. Really It has worked.

Thanks Very much

Chris said on 02.08.2008. 21:40

re Christian (iframe question): I think you need to get into the parent document (window.parent I believe) and get the width and height of the iframe element. I.e., you don't need this script in that case.

Chris said on 08.08.2008. 13:40

Thanks this helped me out a lot.

Rex said on 21.08.2008. 16:40

great! excatly what I was looking for! thanks a lot

blackspot said on 03.10.2008. 05:10

Thank you very much! That really helped me a lot!

Ümit Aslan said on 10.10.2008. 09:34

this code helped me very much. thank you for sharing

zjorzzzey said on 13.10.2008. 23:05

nice one ;)

Kraig said on 28.10.2008. 21:21

How would you do this to handle the onresize event?

KayMan said on 14.11.2008. 17:29

Good script, highly functional...exactly what i needed too!!1:)

rich said on 19.11.2008. 14:01

hi, there is a split second in ie7 where toggle elements show b4 code is fully loaded is there any way to avoid this happening by modifying your javascript?

wheat said on 25.11.2008. 14:27

Perfect! Really helped me out. Thanks.

The Loud Ninja said on 10.01.2009. 00:56

Thank you, thank you, thank you! Trying to figure out the canvas width and height in different browsers is such a *royal* pain. Your script has been a lifesaver many times.

paulr said on 20.01.2009. 07:16

hi. i'm trying to position a horizontal menu at the bottom of the viewport... which i can do, so long as the horizontal scroll bar doesn't appear.

every variable i've tried to use to determine the screen height does not seem to consider the possible presence of the scroll bar. i.e. the value doesn't change when a screen is narrowed and a scroll bar appears.

is there someway to determine viewport height MINUS the scrollbar height???

many tkx...

--paul

Shibaram said on 17.02.2009. 18:54

How can I use this to get the viewport in frames based windows ?

Because I need to show a div in content frame, (this frame only acquires 1/4 of the total screen in center part)

How can I place a div exactly in center of all frames ?

Kyle Simpson said on 22.02.2009. 20:14

I use a different approach, which works in IE6 too. I instantiate an invisible (visibility:hidden) element (div, for instance), and set it position:fixed at 0,0 and width/height of 100%. Actually, for IE quirks, to emulate position:fixed, I use CSS expressions. Anyway, this gives the viewport size (unless the page is too short, which I correct for in other various ways).

raykaash said on 28.02.2009. 09:56

it's works wonderfully...many thanks.

Jack said on 10.03.2009. 08:59

Cool,Thank you very much

imitation said on 31.05.2009. 18:35

Thanks a lot!
This helps me (and clients) save a lot of bandwidth by automagically scaling down the background image on the server to suit the viewport size!

Dudi said on 12.06.2009. 15:58

Cool!
Thanks!

Divya said on 01.07.2009. 10:42

Thanks a million for this!

greg said on 15.07.2009. 06:31

thank you very much!

KGTM said on 18.07.2009. 20:15

Works on Firefox 3.5, Google Chrome, Safari and Opera.

For some reason he doesn't write the document.write action and prints the size values.

MikhailValerie said on 24.07.2009. 01:51

function viewPort() {
var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

return { width : w , height : h }
}

alert('h: ' + viewPort().height + '\r\nw: ' + viewPort().width);

Tested in IE8, FF 3.5, Safari, Opera, Chrome

Jay said on 10.08.2009. 22:13

@MikhailValerie, thanks for the short version!

Alexandra N said on 18.08.2009. 10:18

Really helpful! Thanks!

shaahin said on 20.09.2009. 17:19

tnx! this really helped me! :D

framer said on 22.09.2009. 06:33

if this code is run inside an iframe, it wouldn't be able to get the browser size of hosting page.

Chris said on 15.10.2009. 07:09

Woao.... took forever to find this...THANK YOU SOO MUCH

Francisco said on 21.10.2009. 16:15

Thank you, this is very useful.

Fipo said on 21.10.2009. 22:29

Greetings ;)
Thanks a lot about this article.
It's very useful ...

(bow)

Rajasekhar said on 30.10.2009. 07:56

Pls any one tell me where to add these scripts clearly?

objector.L said on 31.10.2009. 14:52

Nice article! cross-browser code should be like this. That's very useful for me!

eric said on 03.11.2009. 02:17

Nice code. This is exactly what I was searching for.

Anoop said on 01.12.2009. 08:39

pls help me with this... in IE7 and later versions, if document size less than viewport size, this code returns document size. is there a way to get actual viewport size in this case?

bjornson said on 08.12.2009. 08:48

To get the real viewport dimensions that also takes into account the size of scrollbars and works on most browsers in a simple way you should just use jquery and at any point where you need the size you use:
$(window).height()
and
$(window).width()
this just saved me a lot of time!

Joe said on 13.01.2010. 08:16

$(window).width() and $(window).height() shows me only the function that creates it and not numbers. whats wrong?

heres my code, triggered on window resize using jquery:

$(window).resize(function(event){
var width=$(window).width;
alert(width);
})

kamran said on 20.01.2010. 10:46

Vert Thankyou
Vert Thankyou
Vert Thankyou
THANK YOU SOO MUCH
:)

Vacheslav said on 25.01.2010. 12:57

Yes, it works!!
BTW, MSDN article You reffered to isn't available at present.

thamizhmani said on 27.01.2010. 08:35

Thanks.....
This is exactly what I want.

g@miernicki.com said on 01.02.2010. 00:10

awesome! this is by far the best method ive come across to do this to date!

CHEERS!

Sonu said on 11.03.2010. 05:55

THANK U :)

Chetan Crasta said on 23.03.2010. 08:51

Nice script. Thanks for sharing!

springrider said on 13.04.2010. 04:34

great tip! Thanks!

DOUG LUBEY OF LOUISIANA said on 15.04.2010. 03:03

thanks. BUT A FRIENDLY NOTE:

'px' is required for FIREFOX to resize an element


// px is very important for FIREFOX; it will not resize if px is not included
// -25 is so that we can have a real SMALL border around the FLASH object
document.getElementById("panShowCourseWindow").style.height = (viewportheight - 25) + 'px';

=====HTML CODE TO REFERENCE













Yorkshire Web Design said on 01.05.2010. 15:36

Excellent works a treat. Thanks for sharing! Ted

Alex Stanhope said on 21.05.2010. 07:01

Joe, you're referencing the element but not calling the function:

$(window).resize(function(event){
var width=$(window).width;
alert(width);
})

should be

$(window).resize(function(event){
var width=$(window).width();
alert(width);
})

notice brackets after width.
Cheers, Alex

minto antony said on 24.05.2010. 15:52

cool and an extension to this


Untitled Document















Thany said on 17.06.2010. 14:36

viewportwidth = window.innerWidth,
viewportheight = window.innerHeight

This is not right, it should be:

viewportwidth = window.innerWidth;
viewportheight = window.innerHeight;

Otherwise you'll get script errors/warnings.

elchendo said on 13.07.2010. 16:15

Thnx man just what i was looking 4

Robert Bravery said on 23.07.2010. 09:31

This is very nice. This was giving me a headache until I found this script.

Works fantastic.

Golden Eagle said on 29.07.2010. 19:01

@Escoffie : What you need is few lines of AJAX(& some kind of timer which checks for viewport changes at regular intervals).
Check AJAX tutorials

Stju said on 18.08.2010. 16:48

Lifesaver script!
Well done!

emjay said on 15.09.2010. 13:44

I have found that you can use
document.getElementsByTagName('body')[0].clientWidth
on ALL modern browsers and it gives the correct result.

Iswan Jumat said on 18.09.2010. 08:00

Thanks It's work man!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Anemo Form & Funktion said on 08.10.2010. 17:32

This was exactly what I was looking for!

Very useful for setting viewport height to a wrapper div for instance. Just put the script before and use the following to print out the css-code:

document.write('#your-wrapper { height: '+viewportheight+'px; }');

Thanks alot!

Brian said on 15.10.2010. 16:29

Thank you! This was a true lifesaver!

Will said on 25.11.2010. 14:41

Fantastic - just what I was after.

jayrwafu said on 09.12.2010. 06:13

thank u so much.. simple but very helpful...

Matthieu said on 03.01.2011. 10:31

function toggle3(biggerbigbox)

{
var biggerbig=document.getElementById(biggerbigbox);
biggerbig.style.width=(biggerbig.style.width=='90px')?'+viewportwidth++px':'90px';
biggerbig.style.height=(biggerbig.style.height=='90px')?'+viewportheight++px':'90px';
}

I am using this code to toggle boxes from 90px X Y to any bigger size.. I want to use viewportheight and width but i cant seem to find the correct place to add "PX" at without getting or an error, or no result...
Still, it works with a regular div... And i'd like to subtract like 20px on each X and Y so i get a bit of margin...
Any tricks would be well appreciated ^_^

You may contact me with my website's chatbox in the box entitled "chatbox"
I'll also bookmark this page and watch replies! ;)

sztatty said on 05.01.2011. 16:18

Good Job, but my ie gave error with: getElementsByTagName

Char said on 29.01.2011. 01:50

oh, wow, thanks! :)

Saloob said on 07.02.2011. 13:50

Use the following to convert to a php variable;

?>



jurriaan said on 19.02.2011. 12:42

Needs to be in the body section of the html i guess, else it didn't work for me...

Dylan said on 12.03.2011. 06:47

Thank you SOOOOOOOOOO much.

I only needed the height to fully extend nested backgrounds when content is less than viewport.

As in CONTENT

I have tried other solutions, both JS and css including browser-specific stuff...

But this script is the only one that did it all in all browsers.

Thank you SOOOO SOOOO much

Vicious said on 09.04.2011. 13:06

Works in IE8 when I view this page. Copy the code to my own page and I get an error: document.getElementsByTagName(...).0.clientWidth is empty or not an object

Vignesh said on 11.04.2011. 15:40

Hi, Thank you for this script.
And same thing how can i asign the size of webpage. For reverse operation. Thanks.

Ken said on 12.04.2011. 17:50

Thanks!

the cake is a lie said on 18.04.2011. 12:34

worked like a charm - super stuff guys!

gonzo said on 06.05.2011. 02:17

Will this ever work if my javascript is loaded inside a cross-domain iframe?

wa said on 18.05.2011. 03:44

Thank you very much

elstcb said on 27.05.2011. 23:47

Thanks for the post, just what I was looking for!

If you don't mind sacrificing readability then MikhailValerie's short version can be reduced even further.

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;

Leaves the width in variable x and the height in variable y.

Tested in (Win XP) IE6, IE9; (Win 7) FF3, FF4, Chrome 11, Safari 5, Opera 11

The other Ken said on 29.06.2011. 23:39

Thnx. You solved the issue in a hurry

Swapnil Mirkute said on 21.07.2011. 08:06

Thanks for the such a nice post...it has solved my problem.

MartynInManila said on 14.08.2011. 06:53

the perfect ingredient for the sidebar menu where I wanted to determine the inner height to cause an additional element to display or not, thank you

dukanista said on 16.09.2011. 18:20

simply perfect!! is the most compact and readability i've seen. Thanks

Behnam said on 25.09.2011. 15:10

Thanks for the such a nice post...it has solved my problem

noneno said on 07.10.2011. 18:36

how to set a new width value to IE?

GetGoGlobal said on 23.11.2011. 09:45

Thank you very much.

Ted said on 25.11.2011. 05:20

Someone buy this man a drink!
He knows how to write a solid code post. Fixed my issue like a laser.

Ali said on 27.11.2011. 14:53

what i want to know is what is the length of this web page i mean not the screen size/resolution/height etc. but the length of this whole page in pixels.
thanks.
ali

m_online4u@hotmail.com

Timo said on 21.12.2011. 13:12

I get a strange error when trying to receive the width of the browser.

I'm using a VM via RDP with a resolution of 1680x1050. When I want to determine the values with:

width = document.getElementById("editorLoading").offsetWidth;
height = document.getElementById("editorLoading").offsetHeight;


(where editorLoading is a div with 100% width and height), I get a width with 1683px ??!??

jnm2 said on 04.01.2012. 13:13

This way is much faster (no string manipulation) and shorter and does the exact same thing:

function viewport() {
return {width: window.innerWidth || (document.documentElement || document.body).clientWidth, height: window.innerHeight || (document.documentElement || document.body).clientHeight};
}

Questions, comments, insults or praise? Have your say:

:

:

:


7 + 4 =

Articles RSS feed

Page last (manually) updated: October 14, 2011.