Tim Green

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromTim Green
ToMe
SubjectViewport dimensions
Date1 June 2010 09:56
Hi Mark,

Your browser viewport dimensions script often returns the scroll dimensions
(height of entire page, including parts outside viewport) instead of the
actual viewport dimensions, particularly if there are scrolling DIVs etc in
the page. The version below works more reliably in all browsers and
brain-dead IE back to IE6. However, you need to be aware that IE is ALWAYS
returning the dimensions MINUS scrollbar dimensions (if present), real
browsers are always returning overall dimensions (scrollbars make no
difference). IE cannot return viewport dimensions without subtracting the
scrollbars -- real browsers can but that would make the function more
complicated and I wanted to keep it as simple as possible. You need to make
allowance for this difference between IE and real browsrs in any other
scripts.

Call it with vpDims("width") or  vpDims("height")

Cheers,
Tim Green

[Ed. WARNING: The following script does not solve the problem, and
introduces other problems as well (such as breaking in older browsers).
Do not use it.]

function vpDims(dimension) {
 var vpWidth = 0;
 var vpHeight = 0;
 if( typeof( window.innerWidth ) == 'number' ) {
  // Real browsers
  vpWidth = window.innerWidth;
  vpHeight = window.innerHeight;
  } else {
   // Brain-dead Internet Explorer
   if (document.compatMode.toLowerCase() == "backcompat") {
    // IE in Quirks mode
    vpWidth = document.body.clientWidth;
    vpHeight = document.body.clientHeight;
    } else {
     // IE in Standards mode
     vpWidth = document.documentElement.clientWidth;
     vpHeight = document.documentElement.clientHeight;
     }
   }
 if (dimension == "width") {
  return vpWidth;
  } else {
   return vpHeight;
   }
}
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.