This tutorial shows you how to find the exact height and width of the Viewport of the Browser using jQuery. This code works for all the browsers, basically popular browsers such as Chrome, Firefox, Internet Explorer, Safari, Opera etc.,
Here is the code for find the Height of browser window:
|
1 |
$(window).height(); |
Here is the code for find the Width of browser window:
|
1 |
$(window).width(); |
Lets see an example with the above functions:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(function(){ var w = $(window).width(); var h = $(window).height(); $( '.pwidth' ).append(w); $( '.pheight' ).append(h); }); </script> </head> <body> <p class="pwidth">Width of your Browser Viewport is </p> <p class="pheight">Height of your Browser Viewport is </p> </body> </html> |
If you see the above script I have used two p tags to show the height and width of the browser.
append() is the jQuery function to append the text along with the existing text.
So, the output will be like this:
Width of your Browser Viewport is 1600
Height of your Browser Viewport is 799
Note: 1600 and 799 is the width and height of my browser. This will differ for yours!
Next tutorial – Dynamically find the width and height of the browser when the browser Resized.
