Skip to content

JavaScript get screen width/size | Example code

  • by

Use the window screen object with the width property to get the screen width/size in JavaScript. The width property returns the total width of the user’s screen.

let width = screen.width;

Note: This property is read-only and returns width in pixels.

JavaScript gets screen width

Simple example code: Get the screen size, current web page, and browser window.

<!DOCTYPE html>
<html>
<head>
  <body>
    <script>

      console.log("Total width/height: ", screen.width + "*" + screen.height);
      console.log("Available width/height: ", screen.availWidth + "*" + screen.availHeight);
      console.log("Color depth: ", screen.colorDepth);
      console.log("Color resolution: ", screen.pixelDepth);

    </script>

  </body>
</html>

Output:

JavaScript get screen width size

Get the size of the window or document with jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Do comment if you have any doubts or suggestions on this JS screen size topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Your email address will not be published. Required fields are marked *