Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get the Width and Height of the screen in JavaScript?
In this article, we are going to discuss how to get the width and height of the screen in JavaScript.
JavaScript provides a window.screen object that contains information regarding the user's screen. The information includes height and width, and also many other features like color depth and pixel density.
To find the height and width of the screen you need to use the following read-only properties:
- screen.height ? This property returns the height of the screen in pixels.
- screen.width ? This property returns the width of the screen in pixels.
Syntax
Following is the syntax to get the height and width of a screen respectively:
screen.height; screen.width;
Example 1: Getting Screen Width
In the following example, the width of the screen is displayed using the screen.width property.
<html>
<body>
<p id="width"></p>
<script>
document.getElementById("width").innerHTML =
"Screen width is " + screen.width + " pixels";
</script>
</body>
</html>
Screen width is 1920 pixels
Example 2: Getting Screen Height
In the following example, the height of the screen is displayed using the screen.height property.
<html>
<body>
<p id="height"></p>
<script>
document.getElementById("height").innerHTML =
"Screen height is " + screen.height + " pixels";
</script>
</body>
</html>
Screen height is 1080 pixels
Example 3: Getting Both Width and Height
In the following example, we get both the width and height of the screen using the screen.width and screen.height properties:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get the width and height of the screen</title>
</head>
<body>
<div id="width"></div>
<div id="height"></div>
<script type="text/javascript">
document.getElementById("width").innerHTML =
"Width of the screen: " + screen.width + " pixels";
document.getElementById("height").innerHTML =
"Height of the screen: " + screen.height + " pixels";
</script>
</body>
</html>
Width of the screen: 1920 pixels Height of the screen: 1080 pixels
Example 4: Interactive Screen Dimensions
Following is an interactive example that displays screen dimensions when a button is clicked:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Get the width and height of the screen</title>
</head>
<body>
<input type="button" onclick="getScreenDimensions()"
value="Click here to get screen dimensions">
<div id="width"></div>
<div id="height"></div>
<script type="text/javascript">
function getScreenDimensions() {
document.getElementById("width").innerHTML =
"Width of the screen: " + screen.width + " pixels";
document.getElementById("height").innerHTML =
"Height of the screen: " + screen.height + " pixels";
}
</script>
</body>
</html>
Width of the screen: 1920 pixels Height of the screen: 1080 pixels
Key Points
- The screen object is read-only and provides information about the user's display
- Values are returned in pixels and represent the entire screen, not just the browser window
- These properties work across all modern browsers
- Screen dimensions remain constant unless the user changes their display settings
Conclusion
The screen.width and screen.height properties provide a simple way to get the user's screen dimensions in JavaScript. These properties are useful for creating responsive layouts and optimizing content based on screen size.
10K+ Views
