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
Get the size of the screen, current web page and browser window in JavaScript
In JavaScript, you can get different dimensions of the screen, browser window, and web page content using various window properties. This is useful for responsive design, creating dynamic layouts, and adjusting content based on available space.
We will explore three main categories:
- Get the Inner Width and Height (viewport size)
- Get the Outer Width and Height (entire browser window)
- Get Screen Dimensions
Understanding Different Size Properties
| Property | Description | Includes |
|---|---|---|
window.innerWidth/Height |
Viewport size (content area) | Content area only |
window.outerWidth/Height |
Entire browser window | Toolbars, scrollbars, borders |
screen.width/height |
Total screen resolution | Entire screen |
Get the Inner Width and Height
The window.innerWidth and window.innerHeight properties return the viewport size - the area where your web content is displayed, excluding browser toolbars and scrollbars.
<!DOCTYPE html>
<html>
<body>
<h1>Current Browser Window Size</h1>
<p>Following is the size of the current viewport:</p>
<p id="inner-size"></p>
<button onclick="getInnerSize()">Get Inner Size</button>
<script>
function getInnerSize() {
var wd = window.innerWidth;
var ht = window.innerHeight;
var x = document.getElementById("inner-size");
x.innerHTML = "Inner Width = " + wd + "px, Inner Height = " + ht + "px";
}
// Get size on page load
getInnerSize();
</script>
</body>
</html>
Get the Outer Width and Height
The window.outerWidth and window.outerHeight properties return the size of the entire browser window, including toolbars, menu bars, and borders.
<!DOCTYPE html>
<html>
<body>
<h1>Outer Width and Height</h1>
<p>Following is the total browser window size:</p>
<p id="outer-size"></p>
<button onclick="getOuterSize()">Get Outer Size</button>
<script>
function getOuterSize() {
var wd = window.outerWidth;
var ht = window.outerHeight;
var x = document.getElementById("outer-size");
x.innerHTML = "Outer Width = " + wd + "px, Outer Height = " + ht + "px";
}
// Get size on page load
getOuterSize();
</script>
</body>
</html>
Get Screen Dimensions
The screen object provides properties to get the user's total screen resolution, which remains constant regardless of browser window size.
<!DOCTYPE html>
<html>
<body>
<h1>Screen Dimensions</h1>
<p>Total screen resolution:</p>
<p id="screen-size"></p>
<p>Available screen space (excluding taskbar):</p>
<p id="available-size"></p>
<script>
// Total screen size
var screenWidth = screen.width;
var screenHeight = screen.height;
document.getElementById("screen-size").innerHTML =
"Screen Width = " + screenWidth + "px, Screen Height = " + screenHeight + "px";
// Available screen size (excluding taskbar/dock)
var availWidth = screen.availWidth;
var availHeight = screen.availHeight;
document.getElementById("available-size").innerHTML =
"Available Width = " + availWidth + "px, Available Height = " + availHeight + "px";
</script>
</body>
</html>
Complete Example: All Dimensions
<!DOCTYPE html>
<html>
<body>
<h1>All Screen and Window Dimensions</h1>
<div id="dimensions"></div>
<button onclick="updateDimensions()">Refresh Dimensions</button>
<script>
function updateDimensions() {
var info = "<h3>Window Viewport (Inner):</h3>";
info += "Width: " + window.innerWidth + "px, Height: " + window.innerHeight + "px<br><br>";
info += "<h3>Browser Window (Outer):</h3>";
info += "Width: " + window.outerWidth + "px, Height: " + window.outerHeight + "px<br><br>";
info += "<h3>Screen Resolution:</h3>";
info += "Width: " + screen.width + "px, Height: " + screen.height + "px<br><br>";
info += "<h3>Available Screen Space:</h3>";
info += "Width: " + screen.availWidth + "px, Height: " + screen.availHeight + "px";
document.getElementById("dimensions").innerHTML = info;
}
// Update on page load and window resize
updateDimensions();
window.addEventListener('resize', updateDimensions);
</script>
</body>
</html>
Common Use Cases
These properties are commonly used for:
- Responsive Design: Adjust layouts based on viewport size
- Modal Positioning: Center popups using screen dimensions
- Image Sizing: Scale images appropriately for different screens
- Mobile Detection: Determine device type based on screen size
Conclusion
Use window.innerWidth/Height for content area dimensions, window.outerWidth/Height for full browser window size, and screen.width/height for total screen resolution. These properties are essential for creating responsive and adaptive web applications.
2K+ Views
