Javascript Window Screen

The screen object is a part of the window object. It contains information about the screen of the user's device.

It contains information like screen width, screen height, color depth, pixel depth, etc.

There are many different properties of screen objects that return information about the screen.

Properties of Screen Object

The following table shows the properties of the screen object.

screen is a global object so we can use it directly without referring to the window, i.e using window.screen and screen are both valid.

Get Screen Width and Height

The height and width property of the screen object returns the height and width of the user's screen in pixels. These are read-only property

The following example displays the height and width of the user's screen.

var widthOfScreen = screen.width;
console.log("Width of screen is " + widthOfScreen + "px.");

var heightOfScreen = screen.height;
console.log("Height of screen is " + heightOfScreen + "px.");

Get the Available Height And Width Of the Screen

The availHeight and availWidth properties of the screen object return the available height and width of the user's screen in pixels (Available height is the maximum height the browser's window will get if the browser is maximized).

The following example displays the available height and width of the user's screen.

var fullWidth = screen.availWidth;
console.log("Available Width of screen is " + fullWidth + "px.");

var fullHeight = screen.availHeight;
console.log("Available Height of screen is " + fullHeight + "px.");

Get Screen Color Depth

The colorDepth property returns the color depth of the user's screen. The color depth is the number of bits used for each color component in a single pixel, it is also known as bit depth.

The color depth shows how many different colors a device can produce. Example: 1-bit color depth can produce 2¹ = 2 different colors, 2-bit color depth can produce 2² = 4, and so on.

Most computers use 24-bit or 32-bit color depth. 24-bit uses 8-bit for each R, G, and B, and another 8-bit in a 32-bit computer is used for transparency.

var cDepth = screen.colorDepth;
console.log("Color Depth of your device is " + cDepth + "bits.");

Get Orientation Of Device

The orientation property of the screen object returns the orientation of the window screen. It returns an object 2 information:

• type - That shows orientation type, i.e landscape or vertical
• angle - That shows the screen angle of the device

// orientation type
var orienType = screen.orientation.type;
console.log("Screen orientation is " + orienType);

// angle of the screen
var orienAngle = screen.orientation.angle;
console.log("Screen angle is " + orienAngle);

1. What is screen JavaScript?

   A screen is a global object that gives much information about the screen of the user's device like height, width, color depth, orientation, etc.

2. How do I determine window size?

   To determine window size you can use window.innerWidth and window.innerHeight properties. Whereas to determine screen size you can use screen.width and screen.height properties.