JavaScript Screen Object
Written By: Avinash Malhotra
Updated on
Screen
JS Screen Object is the global JS object in browser Environment. For any web browser, screen object tell information regarding device screen. Like screen width, screen height, color depth etc.
Screen.width is width of screen as per viewport whereas window.innerWidth is innerWidth of screen. innerWidth can be changed by resizing browser window and zooming in and out. But screen.width is actual width of your screen.
Screen Properties
| Property | Use | Value |
|---|---|---|
| width | Total width of screen in pixels | |
| height | Total height of screen in pixels | |
| availWidth | Available width of screen in pixels | |
| availHeight | Available height of screen in pixels | |
| availTop | First visible pixel from top | |
| availLeft | First visible pixel from left | |
| colorDepth | return color depth of screen | |
| pixelDepth | return pixel depth ( in bit) of screen |
For Modern browsers, screen.colorDepth and screen.pixelDepth are same.
8 bit = 28 i.e. 256 colors
24 bit = 224 i.e. 16777216 colors
30 bit = 230 i.e. 1073741824 colors
32 bit = 232 i.e. 4294967296 colors
Screen Orientation
Screen Orientation is a non standard property of screen object. This can works on Chrome & Firefox browsers, but not on IE, Edge and Safari. Screen.orientation can give type and angle.
screen.orientation.type; // for Chrome, Firefox, Edge
screen.orientation.angle; // for Chrome, Firefox
screen.msOrientation; // for IE & old Edge
Check Screen Orientation
if(screen.orientation){
alert(screen.orientation.type + " & angle is " + screen.orientation.angle )
}
else if(screen.msOrientation){
alert(screen.msOrientation);
}
else{
alert("orientation not supported")
}