Get viewport/window size (width and height) with javascript

Posted by Andy Langton on Tuesday, 4 December 2007

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:

Development

Comments

Aleksandar

Sun, 03/10/2013 - 20:58

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.

Andy

Sun, 03/10/2013 - 20:58

When you say window size, do

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

raykaash

Sun, 03/10/2013 - 20:58

it's works wonderfully...many

it's works wonderfully...many thanks.

Divya

Sun, 03/10/2013 - 20:58

Thanks a million for this!

KGTM

Sun, 03/10/2013 - 20:58

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.

Rajasekhar

Sun, 03/10/2013 - 20:58

Pls any one tell me where to

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

Vacheslav

Sun, 03/10/2013 - 20:58

Yes, it works!!

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

Sonu

Sun, 03/10/2013 - 20:58

THANK U :)

Stju

Sun, 03/10/2013 - 20:58

Lifesaver script! Well done!

Lifesaver script!
Well done!

emjay

Sun, 03/10/2013 - 20:58

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.

Iswan Jumat

Sun, 03/10/2013 - 20:58

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

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

Anemo Form & Fu...

Sun, 03/10/2013 - 20:58

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!

Brian

Sun, 03/10/2013 - 20:58

Thank you! This was a true

Thank you! This was a true lifesaver!

HermanW

Mon, 06/10/2013 - 06:36

Many Thanks, it's work for me

Many Thanks, it's work for me :)

Sila

Thu, 07/04/2013 - 13:37

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!

Lars

Tue, 03/04/2014 - 02:11

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;

Robert @ Recupe...

Tue, 03/25/2014 - 12:04

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

David

Thu, 03/27/2014 - 18:47

Huge help to me. Can't say

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

rose

Tue, 08/19/2014 - 20:49

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?

rose

Fri, 08/22/2014 - 21:34

This code is great but it is

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

Francis

Wed, 11/19/2014 - 18:15

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' ] };

John

Wed, 01/21/2015 - 16:00

Please can someone tell where

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

Thanks
John.

shiva

Thu, 02/12/2015 - 06:18

Nice code...working great....

Peter Burks

Fri, 01/29/2016 - 21:19

I have tried all these

I have tried all these scripts, looks great but when the size of the screen change your script on this page seems to be different than the examples.
The "Script in Action" get always the correct size when you risize the frame. By the other scripts you must first refresh otherwise the size will not refresh.
Is it possible to send me your script?
Thank you.

Andy Langton

Sat, 03/19/2016 - 23:21

Peter, sorry for the slow

Peter, sorry for the slow reply. I merely used the jquery resize event to re-run the script. See https://api.jquery.com/resize/

Arafat Esmail

Sun, 06/12/2016 - 11:57

Thank you.

Thank you.
This is the easiest solution for this problem.

Daur Gamisonia

Wed, 04/26/2017 - 12:22

Peter Burks, this can be a

Peter Burks, this can be a more understandable answer:

1. Download jQuery from: http://jquery.com/download/
2. Save it as a script in <head> element of a page. Example:

<!DOCTYPE html>
<html lang="ru">
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
</head>

<body>
<h1>The Script in Action</h1>
<p><script type="text/javascript" src="/js/viewport.js"></script></p>
</body>

You can download viewport.js from the page:
'https://andylangton.co.uk/arc/js/viewport.js'

Or use a plain code represented on this page.

Get viewport/window size (width and height) with javascript

The long version

The Script in Action

Shorter versions

Comments

document.documentElement

When you say window size, do

it's works wonderfully...many

Thanks a million for this!

Works on Firefox 3.5, Google

Pls any one tell me where to

Yes, it works!!

THANK U :)

Lifesaver script! Well done!

I have found that you can use

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

This was exactly what I was

Thank you! This was a true

Many Thanks, it's work for me

Hi

I found this on http://www

I'm wondering how to make the

Huge help to me. Can't say

This is not working in safari

This code is great but it is

Thanks for sharing this code

Please can someone tell where

Nice code...working great....

I have tried all these

Peter, sorry for the slow

Thank you.

Peter Burks, this can be a

Add new comment

Plain text

You are here

Get viewport/window size (width and height) with javascript

The long version

The Script in Action

Shorter versions

Comments

document.documentElement

When you say window size, do

it's works wonderfully...many

Thanks a million for this!

Works on Firefox 3.5, Google

Pls any one tell me where to

Yes, it works!!

THANK U :)

Lifesaver script! Well done!

I have found that you can use

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

This was exactly what I was

Thank you! This was a true

Many Thanks, it's work for me

Hi

I found this on http://www

I'm wondering how to make the

Huge help to me. Can't say

This is not working in safari

This code is great but it is

Thanks for sharing this code

Please can someone tell where

Nice code...working great....

I have tried all these

Peter, sorry for the slow

Thank you.

Peter Burks, this can be a

Add new comment

Plain text