The window.screen object provides details about the user's screen, including resolution (width and height), color depth, pixel depth, and more.
Since the window object is at the top of the scope chain, properties of the window.screen object can be accessed without using the window. prefix. For instance, window.screen.width can simply be written as screen.width. The next section demonstrates how to retrieve information about the user's display using properties of the screen object within the window object.
You can utilize the screen.width and screen.height properties to retrieve the dimensions of the user's screen in pixels. The following example will display your screen resolution when a button is clicked:
<script>
function getResolution() {
alert("Your screen is: " + screen.width + "x" + screen.height);
}
</script>
<button type="button" onclick="getResolution();">Get Resolution</button>The screen.availWidth and screen.availHeight properties retrieve the width and height of the browser's usable area on the user's screen, measured in pixels.
The available width and height of the screen are equivalent to the screen's total width and height minus the dimensions of interface elements such as the taskbar in Windows. Here is an example:
<script>
function getAvailSize() {
alert("Available Screen Width: " + screen.availWidth + ", Height: " + screen.availHeight);
}
</script>
<button type="button" onclick="getAvailSize();">Get Available Size</button>You can utilize the screen.colorDepth property to retrieve the color depth of the user's screen. Color depth refers to the number of bits used to represent the color of a single pixel.
Color depth indicates the range of colors a screen can display. For instance, a screen with a color depth of 8 can display 256 colors (28).
Currently, most devices have screens with a color depth of 24 or 32. In simpler terms, more bits enable more color variations; for example, 24 bits can display 224 = 16,777,216 color variations (true colors), while 32 bits can display 232 = 4,294,967,296 color variations (deep colors).
<script>
function getColorDepth() {
alert("Your screen color depth is: " + screen.colorDepth);
}
</script>
<button type="button" onclick="getColorDepth();">Get Color Depth</button>Tip: Currently, nearly every computer and phone display utilizes 24-bit color depth. In 24-bit color depth, 8 bits are allocated to each of Red (R), Green (G), and Blue (B) channels. On the other hand, in 32-bit color depth, 24 bits are dedicated to color information, and the remaining 8 bits are used for transparency.
You can retrieve the pixel depth of the screen using the screen.pixelDepth property. Pixel depth refers to the number of bits used per pixel by the display hardware of the system.
In modern devices, color depth and pixel depth are typically equivalent. Here's an example:
<script>
function getPixelDepth() {
alert("Your screen pixel depth is: " + screen.pixelDepth);
}
</script>
<button type="button" onclick="getPixelDepth();">Get Pixel Depth</button>