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.
| Property | Description |
|---|---|
| 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 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.
Example
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.
Example
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 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.
Example
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
Example
// 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);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.
How do I determine window size?
To determine window size you can use
window.innerWidthandwindow.innerHeightproperties. Whereas to determine screen size you can usescreen.widthandscreen.heightproperties.
