JS Window Screen

The window.screen object contains information about the user's screen.

Screen object

window.screenThe object can be used to display screen resolution (screen width and height), color depth, pixel depth, and so on.

window.screenThe object can be used with a shorthand without a prefix (window.).

screenThe object has the following properties:

• screen.width

• screen.height

• screen.availWidth

• screen.availHeight

• screen.colorDepth

• screen.pixelDepth

The next section will show you how to use the screen object properties of the window object to obtain information about the user's display.

Screen width

screen.widthThe property returns the total width of the visitor's screen (in pixels).

var x = screen.width;

Screen height

screen.heightThe property returns the total height of the visitor's screen (in pixels).

var x = screen.height;

Screen available width

screen.availWidthThe property returns the width of the screen area available for the application window (in pixels).

The area of the application window is the entire screen except for the taskbar.

var x = screen.availWidth;

Screen available height

screen.availHeightThe property returns the height of the screen area available for the application window (in pixels).

The area of the application window is the entire screen except for the taskbar.

var x = screen.availHeight;

Window screen color depth

screen.colorDepthThe property returns the color depth of the user's screen.

Color depth is used to indicate the number of bits used to represent the color of a single pixel.

Color depth indicates how many colors the device screen can produce.

For example, the color depth of8screen can produce256colors (2 ⁸)

var x = screen.colorDepth;

Currently, most devices have24or32color depth. Simply put, more bits produce more color changes, such as24bits can produce2 ²⁴ = 16,777,216Color Change (True Color), and32bits can produce2 ³² = 4,294,967,296Color Change (Dark)

Window Screen Pixel Depth

screen.pixelDepthThe property returns the bit depth of the screen.

Pixel depth is the number of bits used by the system display hardware per pixel.

For modern devices, color depth and pixel depth are equal.

var x = screen.pixelDepth;

More Examples

This example displays all screen properties:

var txt = "";
txt　+= "<p>Total Width/Height: "　+　screen.width　+　"*"　+　screen.height　+　"</p>";
txt　+= "<p>Available Width/Height: "　+　screen.availWidth　+　"*"　+　screen.availHeight　+"</p>";
txt　+= "<p>Color Depth: "　+　screen.colorDepth　+　"</p>";
txt　+= "<p>Color Resolution: "　+　screen.pixelDepth　+　"</p>";
document.write(txt);