A simple function to get the viewport-dimensions, including some pre-calculated values.

README.md

Property	Description
ww	Window Width
wh	Window Height
dw	Document Width
dh	Document Height
pw	Page Width
ph	Page Height
fw	Factor Width (A value between 0-1, which represents the percentage-value)
fh	Factor Height (A value between 0-1, which represents the percentage-value)

If you need just the document width/height, check my tweet sized port of James Padolseys approach https://gist.github.com/yckart/10988011

jquery.viewport.js

$.viewport = (function () {
  var $WINDOW = $(window);
  var $DOCUMENT = $(document);
    
  return function () {
    var ww = $WINDOW.width();
    var wh = $WINDOW.height();
    var dw = $DOCUMENT.width();
    var dh = $DOCUMENT.height();

    return {
      ww: ww,
      wh: wh,
      dw: dw,
      dh: dh,
      pw: dw - ww,
      ph: dh - wh,
      fw: ww / dw,
      fh: wh / dh
    };
  };
}());

viewport.js

var viewport = (function () {
  var html = document.documentElement;
  var body = document.body;
  function getWindowWidth() { return html.clientWidth; }
  function getWindowHeight() { return html.clientHeight; }
 
  function getDocumentWidth() { return Math.max(body.scrollWidth, html.scrollWidth, body.offsetWidth, html.offsetWidth, body.clientWidth, html.clientWidth); }
  function getDocumentHeight() { return Math.max(body.scrollHeight, html.scrollHeight, body.offsetHeight, html.offsetHeight, body.clientHeight, html.clientHeight); }


  return function () {
    var ww = getWindowWidth();
    var wh = getWindowHeight();
    var dw = getDocumentWidth();
    var dh = getDocumentHeight();

    return {
      ww: ww,
      wh: wh,
      dw: dw,
      dh: dh,
      pw: dw - ww,
      ph: dh - wh,
      fw: ww / dw,
      fh: wh / dh
    };
}());