Email conversation
From | Tim Green |
To | Me |
Subject | Viewport dimensions |
Date | 1 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;
}
}