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
Selected Reading
Window innerWidth and innerHeight Properties in JavaScript.
The window.innerWidth and window.innerHeight properties return the width and height of the browser window's content area, excluding toolbars, scrollbars, and borders.
Syntax
let width = window.innerWidth; let height = window.innerHeight;
Properties
- innerWidth - Returns the interior width of the window in pixels
- innerHeight - Returns the interior height of the window in pixels
- Both properties are read-only and return integer values
- Values change when the browser window is resized
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Dimensions</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: green;
margin: 20px 0;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Window innerWidth and innerHeight Properties</h1>
<div class="result"></div>
<button class="btn">Get Window Dimensions</button>
<p>Click the button to display the current window dimensions. Try resizing your browser window and clicking again to see the updated values.</p>
<script>
let resultElement = document.querySelector(".result");
let button = document.querySelector(".btn");
button.addEventListener("click", function() {
resultElement.innerHTML =
"Window Inner Width: " + window.innerWidth + "px<br>" +
"Window Inner Height: " + window.innerHeight + "px";
});
// Optional: Update dimensions on window resize
window.addEventListener("resize", function() {
if (resultElement.innerHTML !== "") {
resultElement.innerHTML =
"Window Inner Width: " + window.innerWidth + "px<br>" +
"Window Inner Height: " + window.innerHeight + "px";
}
});
</script>
</body>
</html>
Real-time Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Window Dimensions</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.dimensions {
font-size: 24px;
color: #333;
margin: 20px;
}
.info {
color: #666;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Live Window Dimensions</h1>
<div class="dimensions" id="dimensions"></div>
<div class="info">Resize your browser window to see the dimensions update in real-time</div>
<script>
function updateDimensions() {
const dimensionsDiv = document.getElementById('dimensions');
dimensionsDiv.innerHTML =
`Width: ${window.innerWidth}px | Height: ${window.innerHeight}px`;
}
// Update on page load
updateDimensions();
// Update on window resize
window.addEventListener('resize', updateDimensions);
</script>
</body>
</html>
Common Use Cases
- Responsive Design - Adjusting layout based on viewport size
- Modal Positioning - Centering popups and dialogs
- Canvas Sizing - Setting canvas dimensions to fit the window
- Media Queries Alternative - JavaScript-based responsive behavior
Browser Compatibility
Both innerWidth and innerHeight properties are supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+.
Conclusion
The window.innerWidth and window.innerHeight properties provide essential viewport dimensions for responsive web development. Use them to create adaptive layouts and properly sized elements based on the available browser window space.
Updated on: 2026-03-15T23:18:59+05:30
242 Views
Advertisements