Window Screen

The window.screen object provides information about the user's screen or monitor. It represents the screen on which the browser window is being displayed. Here are some commonly used properties of the window.screen object:

screen.width

Returns the width of the screen in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript width Property</h1>
<p id="demo"></p>

<script>
  let w = screen.width;
  document.getElementById("demo").innerHTML =  w + "px";
</script>

</body>
</html>

Preview

screen.height

Returns the height of the screen in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript height Property</h1>
<p id="demo"></p>

<script>
  let h = screen.height;
  document.getElementById("demo").innerHTML =  h + "px";
</script>

</body>
</html>

Preview

screen.availWidth

Returns the available width of the screen, excluding operating system interface elements like the taskbar, in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript availWidth Property</h1>
<p id="demo"></p>

<script>
    let w = screen.availWidth;
    document.getElementById("demo").innerHTML = w + "px";
</script>

</body>
</html>

Preview

screen.availHeight

Returns the available height of the screen, excluding operating system interface elements like the taskbar, in pixels.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript availHeight Property</h1>
<p id="demo"></p>

<script>
    h = screen.availHeight;
    document.getElementById("demo").innerHTML = h + "px";
</script>

</body>
</html>

Preview

screen.colorDepth

Returns the bit depth of the color palette for displaying images on the screen. This represents the number of bits used to represent each color component.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript colorDepth Property</h1>
<p id="demo"></p>

<script>
    let cDepth = screen.colorDepth;
    document.getElementById("demo").innerHTML =  cDepth + " pixel";
</script>

</body>
</html>

Preview

screen.pixelDepth

Returns the pixel depth of the screen. This represents the number of bits used to represent each pixel.

Example

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript pixelDepth Property</h1>
<p id="demo"></p>

<script>
    let pDepth = screen.pixelDepth;
    document.getElementById("demo").innerHTML = pDepth + " pixel";
</script>

</body>
</html>

Preview

By accessing these properties, you can gather information about the user's screen size, available screen space, and color capabilities. This information can be useful when developing responsive web applications or when you need to adapt the content based on the user's screen resolution.

JS Window

JS Location

Window Screen

screen.width

Example

screen.height

Example

screen.availWidth

Example

screen.availHeight

Example

screen.colorDepth

Example

screen.pixelDepth

Example

Links

Tutorials

Connect with us