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
JavaScript BOM Window Screen
The JavaScript BOM (Browser Object Model) Window screen object provides detailed information about the user's display screen. This object is useful for creating responsive web applications and gathering display specifications.
Screen Object Properties
| Property | Description |
|---|---|
| screen.width | Returns the total screen width in pixels |
| screen.height | Returns the total screen height in pixels |
| screen.availWidth | Returns the available screen width excluding OS taskbars |
| screen.availHeight | Returns the available screen height excluding OS taskbars |
| screen.colorDepth | Returns the number of bits used to display colors |
| screen.pixelDepth | Returns the color resolution of the screen in bits per pixel |
Basic Screen Information Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Information</title>
</head>
<body>
<h1>Screen Information</h1>
<button onclick="displayScreenInfo()">Get Screen Info</button>
<div id="result"></div>
<script>
function displayScreenInfo() {
const result = document.getElementById('result');
result.innerHTML = `
<h3>Your Screen Details:</h3>
<p>Total Width: ${screen.width}px</p>
<p>Total Height: ${screen.height}px</p>
<p>Available Width: ${screen.availWidth}px</p>
<p>Available Height: ${screen.availHeight}px</p>
<p>Color Depth: ${screen.colorDepth} bits</p>
<p>Pixel Depth: ${screen.pixelDepth} bits</p>
`;
}
</script>
</body>
</html>
Practical Use Cases
Here are common scenarios where screen properties are useful:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Screen Detection Examples</title>
</head>
<body>
<h1>Screen Detection Examples</h1>
<div id="output"></div>
<script>
// Detect screen size category
function getScreenCategory() {
const width = screen.width;
if (width <= 768) return "Mobile/Tablet";
if (width <= 1024) return "Small Desktop";
if (width <= 1440) return "Medium Desktop";
return "Large Desktop";
}
// Check if screen supports high color depth
function supportsHighColor() {
return screen.colorDepth >= 24;
}
// Calculate screen aspect ratio
function getAspectRatio() {
const ratio = screen.width / screen.height;
return ratio.toFixed(2);
}
// Display all information
const output = document.getElementById('output');
output.innerHTML = `
<h3>Screen Analysis:</h3>
<p>Screen Category: ${getScreenCategory()}</p>
<p>High Color Support: ${supportsHighColor() ? 'Yes' : 'No'}</p>
<p>Aspect Ratio: ${getAspectRatio()}</p>
<p>Available Space: ${screen.availWidth}x${screen.availHeight}</p>
`;
</script>
</body>
</html>
Key Differences
Understanding the difference between total and available screen dimensions:
- screen.width/height: Total screen resolution including system UI
- screen.availWidth/availHeight: Usable space excluding taskbars and system panels
- colorDepth vs pixelDepth: Usually identical on modern systems, both indicate color bit depth
Browser Compatibility
The screen object properties are supported across all modern browsers including Chrome, Firefox, Safari, and Edge. These properties are read-only and provide consistent results across different operating systems.
Conclusion
The JavaScript BOM Window screen object provides essential display information for creating responsive and adaptive web applications. Use these properties to optimize your application's layout and functionality based on the user's screen specifications.
522 Views
