JS Screen

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JS Screen

Window Screen

The window. screen object are 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 is used to return the width of the visitor’s screen in pixels.

Example

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Screen width is ” + screen.width;

</script>

</body>

</html>

Output

Window Screen Height

The screen.height property is used to return the height of the visitor’s screen in pixels.

Example

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Screen height is ” + screen.height;

</script>

</body>

</html>

Output

Window Screen Available Width

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

Example

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Available screen width is ” + screen.availWidth;

</script>

</body>

</html>

Output

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

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Available screen height is ” + screen.availHeight;

</script>

</body>

</html>

Output

Window Screen Color Depth

The screen.colorDepth property is used to return the number of bits used to display single 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 made use of 8 bits: 256 different “VGA color”.

Example

Display the color depth of the screen in bits.

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Screen color depth is ” + screen.colorDepth;

</script>

</body>

</html>

Output

Window Screen Pixel Depth

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

Example

<!DOCTYPE html>

<html>

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML =

“Screen pixel depth is ” + screen.pixelDepth;

</script>

</body>

</html>

Output