Get viewport/window 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>
Category: 

Comments

document.documentElement

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.

When you say window size, do

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

it's works wonderfully...many

it's works wonderfully...many thanks.

Thanks a million for this!

Thanks a million for this!

Works on Firefox 3.5, Google

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.

Pls any one tell me where to

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

Yes, it works!!

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

THANK U :)

THANK U :)

Lifesaver script! Well done!

Lifesaver script!
Well done!

I have found that you can use

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

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

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

This was exactly what I was

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!

Thank you! This was a true

Thank you! This was a true lifesaver!

Many Thanks, it's work for me

Many Thanks, it's work for me :)

Hi

Hi

I'm quite new to javascript unfortunately and would be grateful for any help. This code is the only one I have found that resizes the index page of my website (with lots of images) to fit the screen of my ipad without cutting off 20px on the side.

However I don't want to have the dimensions written on the page. Is there a way of avoiding this and still have it work? Spent hours on it and can't seem to find a solution.

Thank you!

I found this on http://www

I found this on http://www.w3schools.com/js/js_window.asp. Practically it's the same but more easy to read:

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

I'm wondering how to make the

I'm wondering how to make the longer version script to update the values dynamically, I mean the values that should update while resizing the browser' window.

I'm building the new version of my site for the recupero dati da NAS, so I'm dealing with media queries and viewports

Sorry, I'm not strong with js :-), so thank you for the working solution

Robert

Huge help to me. Can't say

Huge help to me. Can't say thanks enough.

This is not working in safari

This is not working in safari.
it works in IE, chrome, firefox, opera
I've used the short version code below:
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' ] }
}

ww = viewport().width;

following of my code:
if (ww < 768) {
//execute some code
//the responsive menu should load, however it ends up looking really glitchy. The menu still appears tall and vertical, rather than hiding the menu and should show only the "Menu" link. When the menu link is clicked, the rest of the menu items shows. As well, the menu is converted from hover to a clickable behaviour
}
else if (ww >= 768) {
//execute some code
//The menu returns to a hover behaviour, instead of a clickable behaviour.
}

Can someone help me on this issue?

This code is great but it is

This code is great but it is not working properly in safari

Thanks for sharing this code

Thanks for sharing this code
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }

you forgot a semi-colon
it should be
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };

Please can someone tell where

Please can someone tell where to add this script in my website code.

Thanks
John.

Nice code...working great....

Nice code...working great....

Add new comment