Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery) Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery) javascript javascript

Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)


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 :-)


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>


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