Detect real screen resolution (excluding browser scaling, etc.)

Question

I need to get real screen resolution using JavaScript (at least on the client side), but with problems with both IE and Firefox, as they tend to change this when using the built-in browser scaling.

How can this be done using a cross browser?

Answer 1

function getDimension() {
  var width = 0, height = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    height = window.innerHeight;
    width = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    height = document.documentElement.clientHeight;
    width = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    height = document.body.clientHeight;
    width = document.body.clientWidth;
  }
  window.alert( 'Width = ' + width + 'Height = ' + height);
}

or (jquery)

height    = $(window).height();
width    = $(window).width();