jQuery get viewport size

viewport.js

  // -----------
  // Debugger that shows view port size. Helps when making responsive designs.
  // -----------

  function showViewPortSize(display) {
    if(display) {
      var height = jQuery(window).height();
      var width = jQuery(window).width();
      jQuery('body').prepend('<div id="viewportsize" style="z-index:9999;position:fixed;top:40px;left:5px;color:#fff;background:#000;padding:10px">Height: '+height+'<br>Width: '+width+'</div>');
      jQuery(window).resize(function() {
        height = jQuery(window).height();
        width = jQuery(window).width();
        jQuery('#viewportsize').html('Height: '+height+'<br>Width: '+width);
      });
    }
  }

showViewPortSize(true);

You're using the wrong method calls. A viewport is the "window" that's open on the document: how much of it you can see and where.

Using $(window).height() will not give you the viewport size it will give you the size of the entire window, which is usually the size of the entire document though the document could be even larger.

Solution
To get the size of the actual viewport use window.innerHeight and window.innerWidth.

Do not use the jQuery methods, e.g. $(window).innerHeight(), as these give the wrong numbers. They give you the window's height, not innerHeight.

@mikbe thx for the input, this was spot on

thanks for posting @mikbe I was having a problem with this

Thanks @mikbe. I'm add corrected code for best quality.

  // -----------
  // Debugger that shows view port size. Helps when making responsive designs.
  // -----------
  function showViewPortSize(display) {
    if(display) {
      var height = window.innerHeight;
      var width = window.innerWidth;
      jQuery('body').prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: '+height+'<br>Width: '+width+'</div>');
      jQuery(window).resize(function() {
              height = window.innerHeight;
              width = window.innerWidth;
              jQuery('#viewportsize').html('Height: '+height+'<br>Width: '+width);
      });
    }
  }

  $(document).ready(function(){
     showViewPortSize(true);
  });

Nice work @xmoonlight. Also thanks to @bohman for the original idea and @mikbe for the correction.

Thanks @xmoonlight @bohman and @mikbe !!!!!!

@mikbe
thx