Skip to main content

Reliably get client viewport dimensions in JavaScript.

/*!
 An experiment in getting accurate visible viewport dimensions across devices
 (c) 2012 Scott Jehl.
 MIT/GPLv2 Licence
*/

function viewportSize() {
  var test = document.createElement("div");

  test.style.cssText = "position: fixed;top: 0;left: 0;bottom: 0;right: 0;";
  document.documentElement.insertBefore(test, document.documentElement.firstChild);

  var dims = {
    width: test.offsetWidth,
    height: test.offsetHeight
  };
  document.documentElement.removeChild(test);

  return dims;
}

// Notes:
// relies on position:fixed support, but it should work in browsers that partially support position: fixed like iOS4 and such...

//sample usage: var viewportwidth = viewportSize().width;