jQuery- Show The Height And Width Of The Browser Viewport in Real-Time

Strange. I looked around everywhere for this code, and couldn’t find it anymore online. I simply wanted jQuery code that would show the height and width of the browser viewport in “real-time” I found plenty of code samples that would show the viewport size on page load/refresh, but nothing that would update live, as I was reducing/expanding the browser size. So I decided to write my own code, and it turned it to be a lot easier than anticipated.

Demo

Simply change the size of your browser and the values (height and width) below should automatically update.

Width in pixels:

Height in pixels:

Code

All you need to do is copy/paste the code and it should work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function ()
{
 $(window).resize(function()
 {
  var show_width = $(window).width();
  document.getElementById("output_width").value=show_width.toString();
 
  var show_height = $(window).height();
  document.getElementById("output_height").value=show_height.toString();
 });
});
</script>
 
 
<h3>Width:</h3>
<input type="input" id="output_width" value="" name="width" />
 
<h3>Height:</h3>
<input type="input" id="output_height" value="" name="height" />

So, what do you think? Does it work?

Does anyone know of a more efficient way of getting this result? If so, please let me know.