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.
|availHeight||Returns the height of the screen, in pixels, minus interface features like the Windows Taskbar.|
|availWidth||Returns the width of the screen, in pixels, minus interface features like the Windows Taskbar.|
|colorDepth||Returns the color depth of the screen, in bits per pixel.|
|height||Returns the total height of the screen, in pixels.|
|pixelDepth||Returns the color depth of the screen, in bits per pixel.|
|width||Returns the total width of the screen, in pixels.|
|orientation||Returns the orientation of the screen.|
screen is a global object so we can use it directly without referring to the window, i.e using
screen are both valid.
Get Screen Width and Height
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.
▶ Try it
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
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.
▶ Try it
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
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 21 = 2 different colors, 2-bit color depth can produce 22 = 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.
▶ Try it
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
▶ Try it
// 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);
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.
How do I determine window size?
To determine window size you can use
window.innerHeightproperties. Whereas to determine screen size you can use