//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">

    </head>
    <body>
        <p>
            <button id="buttonId">Click to display screen dimension information</button>
        </p>
        <script>

            
            //INPUT:    get the screen height and width (as a number of pixels), 
            //          and return the info as an object
            var getScreenInfo = function () {
                console.log( "in getScreenInfo..." );
                
                return {
                    width:      window.innerWidth,
                    height:     window.innerHeight
                };
            }

            //PROCESS:  take the screen information and find out the 
            //          largest and smallest dimensions and properties
            var processScreenInfo = function ( screenObj ) {
                console.log( "in processScreenInfo. screenObj=", 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 );
                
                //IF: the width is bigger than the height, then the screen is horizontal
                if ( screenObj.width >= screenObj.height ) {
                    screenObj.largestProperty   = 'width';
                    screenObj.smallestProperty  = 'height';
                    screenObj.orientation       = 'horizontal';
                    
                //ELSE: the screen is vertical                  
                } else {
                    screenObj.largestProperty   = 'height';
                    screenObj.smallestProperty  = 'width';
                    screenObj.orientation       = 'vertical';
                }
                
                //put together the informationMessage and store back inside the screen object
                screenObj.informationMessage 
                    = "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;
                    
                return screenObj;
            }
            
            //OUTPUT: display the screen information in an alert
            var outputScreenInfo = function ( informationMessage ) {
                console.log( "in outputScreenInfo. informationMessage=" + informationMessage );
                
                alert( informationMessage );
            }
            
            //INPUT EVENT: read the screen information when the button is clicked
            document.querySelector( '#buttonId' ).onclick = function () {
                console.log( '#buttonId has been clicked' );
                
                var screenObj   = getScreenInfo();
                screenObj       = processScreenInfo( screenObj );
                outputScreenInfo( screenObj.informationMessage );
            }
        </script>
    </body>
</html>

Learn more