Screen

JS Screen Object is the global JS object in browser Environment. For any web browser, screen object tell information related To 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
orientation return orientation object

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 read only property of screen object. This can works on all major browsers. Screen.orientation can give type and angle.


    const x=screen.orientation.type;        
    const y=screen.orientation.angle;  

    console.log(x);
    console.log(y);

Screen orientation of Internet Explorer


    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")
}

screen.orientation.onchange

screen.orientation.onchange events trigger when device orientation change. This works with most of mobiles, ipads, tabs and laptops with touch screens.

Change Device Orientation to check


screen.orientation.onchange=function(){
    console.log(screen.orientation.type, screen.orientation.angle)
};