Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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);
@mikbe

This comment has been minimized.

Copy link

@mikbe mikbe commented Nov 30, 2014

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.

@adrien-be

This comment has been minimized.

Copy link

@adrien-be adrien-be commented Feb 23, 2016

@mikbe thx for the input, this was spot on

@tim545

This comment has been minimized.

Copy link

@tim545 tim545 commented Mar 7, 2016

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

@xmoonlight

This comment has been minimized.

Copy link

@xmoonlight xmoonlight commented Mar 31, 2016

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

This comment has been minimized.

Copy link

@Jiab77 Jiab77 commented Sep 23, 2016

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

@sebabelmar

This comment has been minimized.

Copy link

@sebabelmar sebabelmar commented May 3, 2017

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

@13hoop

This comment has been minimized.

Copy link

@13hoop 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