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>
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!
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 :)
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
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....
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.
Add new comment