Browsers View port Width & Height using Javascript

Toniyo Jackson

5.00/5 (2 votes)

Apr 19, 2011

CPOL

32791

To get Browsers View port Width & Height using JavaScript

This code will help you to get the browser's view port width & height. First, we need to write the below JavaScript inside the head section in HTML.

<script type="text/javascript" language="javascript">
        function fnGetWidthHeight() {
            var viewportwidth;
            var viewportheight;
            // The more standards compliant browsers (mozilla/netscape/opera/chrome/IE7) use window.innerWidth and window.innerHeight
            if (typeof window.innerWidth != 'undefined') {
                viewportwidth = window.innerWidth;
                viewportheight = window.innerHeight;
            }
            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
                viewportwidth = document.documentElement.clientWidth;
                viewportheight = document.documentElement.clientHeight;
            }
            // older versions of IE
            else {
                viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
                viewportheight = document.getElementsByTagName('body')[0].clientHeight;
            }
            alert('Your viewport width & height is ' + viewportwidth + 'x' + viewportheight);
        }
    </script>

Then, we need to call this script from the body tag like below:

<body onload="fnGetWidthHeight()">

Now, run and see the size of view port area by increasing/decreasing the browser width/height.