JavaScript Window Screen

❮ Previous Next ❯

The window.screen object holds details about the user's screen.

Window Screen

The window.screen object can be referred to without using the "window" prefix.

Properties:

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

Window Screen Width

The screen.width feature gives the width of the user's screen in pixels.

Window Screen Height

The screen.height attribute gives you the height of the visitor's screen in pixels.

Window Screen Available Width

The screen.availWidth tells you how wide the visitor's screen is in pixels, excluding things like the Windows Taskbar.

Window Screen Available Height

The screen.availHeight gives you the height of the visitor's screen in pixels. It excludes interface elements like the Windows Taskbar from the total height.

Window Screen Color Depth

The screen.colorDepth tells you how many bits are used to show a single color on the screen.

Most present-day computers employ hardware with either 24-bit or 32-bit color resolution.

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

Older computers had a resolution known as "High Colors" with 16 bits, allowing for 65,536 different variations.

Old computers and cell phones from the past used 8 bits, allowing for 256 different colors known as "VGA colors.

In HTML, the #rrggbb (rgb) values stand for "True Colors," which means there are 16,777,216 different colors available.

Window Screen Pixel Depth

The screen.pixelDepth property tells you how many pixels the screen can display.

In today's computers, Color Depth and Pixel Depth have the same value.

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Screen width is " + screen.width;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Screen height is " + screen.height;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Available screen width is " + screen.availWidth;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Available screen height is " + screen.availHeight;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Screen color depth is " + screen.colorDepth;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Screen pixel depth is " + screen.pixelDepth;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics