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

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 (True Tone)

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
    screen.orientation.angle;        // for Chrome, Firefox
    screen.msOrientation;           // for IE & Edge

Check Screen Orientation




if(screen.orientation){
    alert(screen.orientation.type + " & angle is " + screen.orientation.angle )
}
else{
    alert(screen.msOrientation)
}