Browsers View port Width & Height using Javascript

Toniyo Jackson

5.00/5 (2 votes)

19 Apr 2011CPOL

32.8K

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)