Comparing document size data
This demo evaluates the various methods used by jQuery to figure out the document size.
A 30px margin and a 30px padding have been added to the body so that body size doesn't accidentally coincide with document size.
- document element/<html>
- body
- content area
Display the content area
- The true document size, calculated using a wrapper div for the content and the window size:
- Sanity check. The reported window size is:
- The document size reported by jQuery: $( document ).width(), $( document ).height()
Now here's what the various document properties are telling us. jQuery will simply pick the largest value, and this approach doesn't work reliably for most versions of IE.
- d.dE.clientWidth, d.dE.clientHeight
- d.dE.scrollWidth, d.dE.scrollHeight
- body.scrollWidth, body.scrollHeight
- d.dE.offsetWidth, d.dE.offsetHeight
- body.offsetWidth, body.offsetHeight
Finally, this is what a plugin containing a fix returns:
- $( document ).trueWidth(), $( document ).trueHeight()