View Categories

Javascript Screen

2 min read

Агуулга

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

Window Screen #

The window.screen object can be written without the window prefix.

Properties:

  • screen.width
  • screen.height
  • screen.availWidth
  • screen.availHeight
  • screen.colorDepth
  • screen.pixelDepth

Window Screen Width #

The screen.width property returns the width of the visitor’s screen in pixels.

Example #

Display the width of the screen in pixels:

document.getElementById("demo").innerHTML = "Screen Width: " + screen.width;

Result will be:

Screen Width: 1440

Window Screen Height #

The screen.height property returns the height of the visitor’s screen in pixels.

Example #

Display the height of the screen in pixels:

document.getElementById("demo").innerHTML = "Screen Height: " + screen.height;

Result will be:

Screen Height: 900

Window Screen Available Width #

The screen.availWidth property returns the width of the visitor’s screen, in pixels, minus interface features like the Windows Taskbar.

Example #

Display the available width of the screen in pixels:

document.getElementById("demo").innerHTML = "Available Screen Width: " + screen.availWidth;

Result will be:

Available Screen Width: 1440

Window Screen Available Height #

The screen.availHeight property returns the height of the visitor’s screen, in pixels, minus interface features like the Windows Taskbar.

Example #

Display the available height of the screen in pixels:

document.getElementById("demo").innerHTML = "Available Screen Height: " + screen.availHeight;

Result will be:

Available Screen Height: 818

Window Screen Color Depth #

The screen.colorDepth property returns the number of bits used to display one color.

All modern computers use 24 bit or 32 bit hardware for color resolution:

  • 24 bits =      16,777,216 different “True Colors”
  • 32 bits = 4,294,967,296 different “Deep Colors”

Older computers used 16 bits: 65,536 different “High Colors” resolution.

Very old computers, and old cell phones used 8 bits: 256 different “VGA colors”.

Example #

Display the color depth of the screen in bits:

document.getElementById("demo").innerHTML = "Screen Color Depth: " + screen.colorDepth;

Result will be:

Screen Color Depth: 24

The #rrggbb (rgb) values used in HTML represents “True Colors” (16,777,216 different colors)

Window Screen Pixel Depth #

The screen.pixelDepth property returns the pixel depth of the screen.

Example #

Display the pixel depth of the screen in bits:

document.getElementById("demo").innerHTML = "Screen Pixel Depth: " + screen.pixelDepth;

Result will be:

Screen Pixel Depth: 24

For modern computers, Color Depth and Pixel Depth are equal.

What are your Feelings

Powered by BetterDocs

Leave a Reply