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

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

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