//INPUT: Read the height and width of the screen

<New code>

//INPUT JS: var windowWidth = window.innerWidth;
— returns the width of the user's browser window, not including scrollbars and toolbars.

//INPUT JS: var windowHeight = window.innerHeight;
— returns the height of the user's browser window, not including scrollbars and toolbars.

Find the measurements of the browser window

Most, but not all, desktop screens are viewed horizontally. Most, but not all, mobile devices are viewed vertically. And there are many, many different screen sizes depending on the hardware and browser settings of the user.

Because of this, it is very handy to be able to find out the size and orientation of the screen so you can customize your output for the user.

Example code


The above code was created with:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>INPUT - Read the height and width of the screen</title>
        <meta name="description" content="Learn how to read the height and width of the screen">
        <meta name="author" content="Dave Drapak">
        <script>
            var mainProcedure = function () {
                console.log('in mainProcedure...');
                
                var screenObj   = getScreenInformation();
                screenObj       = processScreenInformation( screenObj );
                outputScreenInformation( screenObj );
            }
            
            //INPUT: get the screen height and width (as a number of pixels), and return the info as an object
            var getScreenInformation = function () {
                return {
                    width:      window.innerWidth,
                    height:     window.innerHeight
                };
            }

            //PROCESS: take the screen information and find out the largest and smallest dimensions and properties
            var processScreenInformation = function ( screenObj ) {
                // find out the largest and smallest screen dimensions
                screenObj.largestDimension      = Math.max( screenObj.width, screenObj.height );
                screenObj.smallestDimension     = Math.min( screenObj.width, screenObj.height );
                
                // find out the smallest and largest properties of the screen
                if ( screenObj.width >= screenObj.height ) {
                    screenObj.largestProperty   = 'width';
                    screenObj.smallestProperty  = 'height';
                    screenObj.orientation       = 'horizontal';
                } else {
                    screenObj.largestProperty   = 'height';
                    screenObj.smallestProperty  = 'width';
                    screenObj.orientation       = 'vertical';
                }
                
                return screenObj;
            }
            
            //OUTPUT: display the screen information in an alert
            var outputScreenInformation = function ( screenObj ) {
                alert(
                    "Height = " 
                    + screenObj.height
                    + "\nWidth = " 
                    + screenObj.width
                    + "\nSmallest dimension = " 
                    + screenObj.smallestDimension
                    + "\nScreen orientation = " 
                    + screenObj.orientation
                    + "\nSmallest property = " 
                    + screenObj.smallestProperty
                    + "\nLargest dimension = " 
                    + screenObj.largestDimension
                    + "\nLargest property = " 
                    + screenObj.largestProperty
                );
            }
        </script>
    </head>
    <body>
            <p>
                <button onclick="mainProcedure();">Click to display screen dimension information</button>
            </p>
    </body>
</html>

Learn more