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
Recent Comments:
Page last (manually) updated: May 01, 2007.
Questions, comments, insults or praise? Have your say: