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:
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