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 Screen availWidth Property
The HTML Screen availWidth property returns the available width of the user's screen in pixels, excluding browser interface elements like toolbars, scrollbars, and other UI components. This property is part of the Screen object in JavaScript and provides the actual usable screen width for web content.
Syntax
Following is the syntax for the availWidth property −
screen.availWidth
Return Value
The screen.availWidth property returns an integer representing the available screen width in pixels. This value is always less than or equal to the total screen width (screen.width) as it excludes the space occupied by browser toolbars and system UI elements.
Example
Following example demonstrates how to use the Screen availWidth property to display the available screen width −
<!DOCTYPE html>
<html>
<head>
<title>Screen availWidth Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
.btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
margin: 10px;
}
.btn:hover {
background-color: #0056b3;
}
.result {
font-size: 18px;
font-weight: bold;
margin: 20px 0;
padding: 15px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<h1>HTML Screen availWidth Property</h1>
<p>Click the button to display your screen's available width:</p>
<button class="btn" onclick="showAvailWidth()">Show Available Width</button>
<div class="result" id="output"></div>
<script>
function showAvailWidth() {
var availWidth = screen.availWidth;
document.getElementById("output").innerHTML =
"Available Screen Width: " + availWidth + " pixels";
}
</script>
</body>
</html>
The output displays a button that, when clicked, shows the available screen width −
Available Screen Width: 1920 pixels (The actual value depends on your screen resolution and browser setup)
Comparing Screen Properties
Following example shows the difference between various screen width properties −
<!DOCTYPE html>
<html>
<head>
<title>Screen Width Comparison</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f8f9fa;
}
.comparison {
background-color: white;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn {
background-color: #28a745;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.property {
margin: 10px 0;
font-size: 16px;
}
.value {
font-weight: bold;
color: #007bff;
}
</style>
</head>
<body>
<h1>Screen Width Properties Comparison</h1>
<button class="btn" onclick="compareScreenProperties()">Compare Screen Properties</button>
<div class="comparison" id="results">
<p>Click the button to see the comparison of different screen width properties.</p>
</div>
<script>
function compareScreenProperties() {
var results = document.getElementById("results");
results.innerHTML =
"<div class='property'>Total Screen Width: <span class='value'>" +
screen.width + " pixels</span></div>" +
"<div class='property'>Available Screen Width: <span class='value'>" +
screen.availWidth + " pixels</span></div>" +
"<div class='property'>Window Inner Width: <span class='value'>" +
window.innerWidth + " pixels</span></div>" +
"<div class='property'>Document Client Width: <span class='value'>" +
document.documentElement.clientWidth + " pixels</span></div>";
}
</script>
</body>
</html>
This comparison helps understand the difference between total screen width, available width, browser window width, and document width.
Practical Use Cases
The availWidth property is commonly used for −
Responsive Design − Determining optimal layout based on available screen space
Window Sizing − Setting popup window dimensions that fit within available screen area
Media Queries Alternative − JavaScript-based responsive behavior using screen dimensions
Device Detection − Identifying device characteristics for mobile vs desktop experiences
Browser Compatibility
The screen.availWidth property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the standard Screen API and provides consistent behavior across different platforms.
Conclusion
The Screen availWidth property provides the usable screen width in pixels, excluding browser and system UI elements. It is essential for responsive design decisions and ensuring content fits properly within the available display area. This property works reliably across all modern browsers and operating systems.
169 Views
