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 MSDN 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.
<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
12.04.2007. 19:27
Ferry Meidianto said on 05.05.2007. 12:38
Thanks. It's fully help me.
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.
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
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.
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.
Rex said on 21.08.2008. 16:40
great! excatly what I was looking for! thanks a lot
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).
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!
Recent Responses:
Page last (manually) updated: March 16, 2009.
Questions, comments, insults or praise? Have your say: