Skip to content

Instantly share code, notes, and snippets.

@bohman
Last active November 20, 2020 11:37
Show Gist options
  • Star 29 You must be signed in to star a gist
  • Fork 13 You must be signed in to fork a gist
  • Save bohman/1351439 to your computer and use it in GitHub Desktop.
Save bohman/1351439 to your computer and use it in GitHub Desktop.
jQuery get viewport size
// -----------
// 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);
@tim545
Copy link

tim545 commented Mar 7, 2016

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

@xmoonlight
Copy link

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);
  });

@Jiab77
Copy link

Jiab77 commented Sep 23, 2016

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

@sebabelmar
Copy link

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

@13hoop
Copy link

13hoop commented May 7, 2017

@mikbe
thx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment