JavaScript Screen Object

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 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 on Internet Explorer

Deprecated

    screen.msOrientation;           // for IE & old Edge

Check Screen Orientation

To check screen orientation in javascript, use screen.orientation object. This will return a string value.

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.

screen.orientation.addEventListener("change",()=>{
    console.log(screen.orientation.type);
    console.log(screen.orientation.angle);
});