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
How to get the pixel depth and color depth of a screen in JavaScript?
The JavaScript window object provides methods to get screen display information through the screen object. Two important properties are screen.colorDepth and screen.pixelDepth which return the color depth and pixel depth of the browser screen respectively.
Color Depth
The screen.colorDepth property returns the number of bits used to display one color on the screen. Modern computers typically use 24-bit or 32-bit hardware for color resolution, where:
- 24-bit color: Supports 16.7 million colors (True Color)
- 32-bit color: Includes an alpha channel for transparency
Syntax
screen.colorDepth
Example
<html>
<body>
<p id="colorDepth"></p>
<script>
document.getElementById("colorDepth").innerHTML =
"Screen color depth is " + screen.colorDepth + " bits";
</script>
</body>
</html>
Output
Screen color depth is 24 bits
Pixel Depth
The screen.pixelDepth property returns the pixel depth of the browser screen. In most modern browsers, pixel depth and color depth return the same value, as they both represent the number of bits per pixel.
Syntax
screen.pixelDepth
Example
<html>
<body>
<p id="pixelDepth"></p>
<script>
document.getElementById("pixelDepth").innerHTML =
"Screen pixel depth is " + screen.pixelDepth + " bits";
</script>
</body>
</html>
Output
Screen pixel depth is 24 bits
Complete Example
Here's a comprehensive example that displays both color depth and pixel depth information:
<html>
<body>
<h3>Screen Display Information</h3>
<div id="screenInfo"></div>
<script>
const info = `
<p><strong>Color Depth:</strong> ${screen.colorDepth} bits</p>
<p><strong>Pixel Depth:</strong> ${screen.pixelDepth} bits</p>
<p><strong>Screen Width:</strong> ${screen.width} pixels</p>
<p><strong>Screen Height:</strong> ${screen.height} pixels</p>
`;
document.getElementById("screenInfo").innerHTML = info;
</script>
</body>
</html>
Browser Compatibility
Both screen.colorDepth and screen.pixelDepth are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. These properties have been part of the Screen interface since early browser versions.
Conclusion
Use screen.colorDepth and screen.pixelDepth to get display information about the user's screen. Both properties typically return the same value in modern browsers, representing the number of bits used per pixel for color representation.
610 Views
