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
HTML Window outerWidth Property
The HTML Window outerWidth property returns the total width of the browser window, including all interface elements like scrollbars, toolbars, and window borders. This property is useful for responsive design and layout calculations that need to account for the complete browser window dimensions.
Syntax
Following is the syntax for the outerWidth property −
window.outerWidth
Return Value
The outerWidth property returns an integer value representing the total width of the browser window in pixels, including:
- The content area
- Vertical scrollbars (if present)
- Window borders
- Any browser interface elements
Basic Example
Following example demonstrates how to get the browser window's outer width −
<!DOCTYPE html>
<html>
<head>
<title>Window outerWidth Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>HTML Window outerWidth Property</h1>
<button onclick="display()" style="background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">Show Browser Window Width</button>
<div id="result" style="font-size: 1.2rem; margin-top: 20px; color: #333;"></div>
<script>
function display() {
document.getElementById('result').innerHTML = 'Browser Window Width: ' + window.outerWidth + 'px';
}
</script>
</body>
</html>
The output displays a button that, when clicked, shows the current browser window width −
Browser Window Width: 1200px (The actual value depends on your browser window size)
Comparing outerWidth vs innerWidth
The outerWidth includes the entire browser window, while innerWidth only measures the content viewport area without scrollbars and borders.
Example
<!DOCTYPE html>
<html>
<head>
<title>outerWidth vs innerWidth</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Window Width Comparison</h2>
<button onclick="showWidths()" style="background: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Compare Window Widths</button>
<div id="comparison" style="margin-top: 15px; font-size: 16px;"></div>
<script>
function showWidths() {
var outer = window.outerWidth;
var inner = window.innerWidth;
var difference = outer - inner;
document.getElementById('comparison').innerHTML =
'<p><strong>Outer Width:</strong> ' + outer + 'px (entire browser window)</p>' +
'<p><strong>Inner Width:</strong> ' + inner + 'px (content viewport only)</p>' +
'<p><strong>Difference:</strong> ' + difference + 'px (borders + scrollbars)</p>';
}
</script>
</body>
</html>
The output shows the comparison between outer and inner width measurements −
Outer Width: 1200px (entire browser window) Inner Width: 1184px (content viewport only) Difference: 16px (borders + scrollbars)
Real-time Width Monitoring
Following example shows how to monitor window width changes when the user resizes the browser −
<!DOCTYPE html>
<html>
<head>
<title>Real-time Width Monitoring</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Resize Browser Window to See Changes</h2>
<div id="live-width" style="background: #f8f9fa; padding: 15px; border-radius: 4px; font-size: 18px; color: #333;">
Current Width: Loading...
</div>
<p style="color: #666; margin-top: 10px;">The width updates automatically when you resize the browser window.</p>
<script>
function updateWidth() {
document.getElementById('live-width').textContent = 'Current Width: ' + window.outerWidth + 'px';
}
// Update immediately
updateWidth();
// Update on window resize
window.addEventListener('resize', updateWidth);
</script>
</body>
</html>
The width display updates in real-time as the user resizes the browser window.
Browser Compatibility
The outerWidth property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, the exact values may vary slightly between different browsers due to different interface designs.
| Browser | Support | Notes |
|---|---|---|
| Chrome | Yes | Full support |
| Firefox | Yes | Full support |
| Safari | Yes | Full support |
| Edge | Yes | Full support |
| IE 9+ | Yes | Limited support in older versions |
Practical Use Cases
The outerWidth property is commonly used for:
- Responsive design calculations − Determining available space for layout adjustments
- Popup window positioning − Centering dialogs or modals relative to the browser window
- Multi-monitor setup detection − Understanding the complete window dimensions across different screen configurations
- Analytics and user experience tracking − Collecting data about user's browser window sizes
Conclusion
The window.outerWidth property provides the total width of the browser window including interface elements like scrollbars and borders. It differs from innerWidth by including these additional browser UI components, making it useful for complete window dimension calculations and responsive design implementations.
217 Views
