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); |
This comment has been minimized.
This comment has been minimized.
@mikbe thx for the input, this was spot on |
This comment has been minimized.
This comment has been minimized.
thanks for posting @mikbe I was having a problem with this |
This comment has been minimized.
This comment has been minimized.
Thanks @mikbe. I'm add corrected code for best quality.
|
This comment has been minimized.
This comment has been minimized.
Nice work @xmoonlight. Also thanks to @bohman for the original idea and @mikbe for the correction. |
This comment has been minimized.
This comment has been minimized.
Thanks @xmoonlight @bohman and @mikbe !!!!!! |
This comment has been minimized.
This comment has been minimized.
@mikbe |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
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
andwindow.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.