75

I'm trying to find the exact height and width of a browser's viewport, but I suspect that either Mozilla or IE is giving me the wrong number. Here's my method for height:

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

I haven't started on width yet but I'm guessing it's going to be something similar.

Is there a more correct way of getting this information? Ideally, I'd like the solution to work with Safari/Chrome/other browsers as well.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Alex Grin
  • 8,121
  • 6
  • 33
  • 57
  • 1
    possible duplicate of [Get the browser viewport dimensions with JavaScript](http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) – Stephan Nov 24 '14 at 13:28
  • Also, you can use the [W](https://github.com/pyrsmk/W) library, which handles cross-browser viewport detection ;) – pyrsmk Apr 29 '16 at 13:51

5 Answers5

96

You might try this:

function getViewport() {

 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
 }
 return [viewPortWidth, viewPortHeight];
}

( http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ )

However, it is not even possible to get the viewport information in all browsers (e.g. IE6 in quirks mode). But the above script should do a good job :-)

Leo
  • 37,640
  • 8
  • 75
  • 100
  • 4
    Been stuck with a bug for like 5 hours, turns out jquery don't return the same value in FF/Chrome when doing `$(document).width()` or `$(window).width()`. `window.innerWidth` works great. – qwerty Dec 11 '12 at 12:59
  • This doesn't seems to work inside of iframes, instead, it returns the iframe size. Any clue about that? – Alejandro García Iglesias Aug 09 '13 at 19:42
  • 2
    @GarciaWebDev So what you're saying is that it works correctly ;-) – Dee2000 Oct 30 '13 at 16:52
  • @Dee2000 what i'm saying or rather what i want to say is that when you measure on a regular page, you get the browser viewport size, but when you measure from inside of an iframe, you get that iframe's document size, not the browser viewport. Not sure if i'm explaining it well, let me know if i should reformulate. – Alejandro García Iglesias Oct 31 '13 at 05:22
  • @GarciaWebDev On a simple page, you 'think' you're getting the 'browser' viewport size, but you're not. You're getting the viewport size of the HTML page you're on/in. Whether that page is 'top' or in an iframe or a nested-nested-nested iframe, it's always the viewport size of the HTML page you're on/in. If you want to know the viewport size of the top (or parent) page, as long as your iframe is 'friendly' (not cross-domain) then you can simply replace "window." with "parent." or "top." to each value you test (e.g. parent.innerWidth). – Dee2000 Oct 31 '13 at 13:33
  • @Dee2000 no, please take a look at this jsbin: http://jsbin.com/UMoTATU/1/edit -- if you look at the console tab, you will see that it displays the size of the browser window (mine "631"), not the lenghty document, which has height of about 12816px. Different is if you run that code inside of an iframe, it returns the height of the iframe, not the browser viewport. – Alejandro García Iglesias Nov 01 '13 at 04:01
20

You may use shorter version:

<script type="text/javascript">
<!--
function getViewportSize(){
    var e = window;
    var a = 'inner';
    if (!('innerWidth' in window)){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>
dzona
  • 3,323
  • 3
  • 31
  • 47
18

I've always just used document.documentElement.clientHeight/clientWidth. I don't think you need the OR conditions in this case.

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
Ben
  • 1,531
  • 1
  • 11
  • 9
  • It couldn't hurt. They remainder will not be evaluated once a valid value is found – Justin Johnson Nov 19 '09 at 22:53
  • 2
    you have a typo there, should be : 'document.documentElement'. this does not work in quircksmode... on FF it gives the whole document height, instead of just the 'clientHeight', and on IE it gives '0'. – vsync Mar 23 '10 at 14:40
  • 4
    Agreed `document.documentElement.clientWidth` is the way to go in pure JS. http://responsejs.com/labs/dimensions/ – ryanve Jan 16 '12 at 05:58
  • Agreed. From: http://www.quirksmode.org/mobile/viewports.html - "`document.documentElement` is in fact the `` element". "`document.documentElement.clientWidth` and `clientHeight` still gives the dimensions of the viewport, and not of the `` element. (This is *a special rule* that goes *only for this element only for this property pair*. In all other cases the actual width of the element is used.)" Therefore it should work "in all cases" from IE6 standards mode and upwards. These values are *excluding* scrollbars (unlike `window.innerWidth` and `innerHeight`). – GitaarLAB Aug 14 '15 at 22:39
6

Try this.. 

<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>
Mathi
  • 175
  • 2
  • 6
  • 12
1

Use this tipp: http://www.appelsiini.net/projects/viewport or that code: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

powtac
  • 40,542
  • 28
  • 115
  • 170