Using jQuery To Get Size of Viewport

jquery resize size viewport
Volomike picture Volomike · Jun 15, 2010 · Viewed 285.7k times · Source

How do I use jQuery to determine the size of the browser viewport, and to redetect this if the page is resized? I need to make an IFRAME size into this space (coming in a little on each margin).

For those who don't know, the browser viewport is not the size of the document/page. It is the visible size of your window before the scroll.

Answer

SimaWB picture SimaWB · Jun 15, 2010

To get the width and height of the viewport:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

resize event of the page:

$(window).resize(function() {

});

Related questions

jquery $(window).width() and $(window).height() return different values when viewport has not been resized

I am writing a site using jquery that repeatedly calls $(window).width() and $(window).height() to position and size elements based on the viewport size. In troubleshooting I discovered that I am getting slightly different viewport size reports in repeated …

Read More
How to resize images proportionally / keeping the aspect ratio?

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio. Can someone point me to some code, or explain the …

Read More
Cross-browser window resize event - JavaScript / jQuery

What is the correct (modern) method for tapping into the window resize event that works in Firefox, WebKit, and Internet Explorer? And can you turn both scrollbars on/off?

Read More