Javascript Reference - Screen availWidth Property

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

Browser Support

The availWidth property is supported in all major browsers.


`availWidth`	Yes	Yes	Yes	Yes	Yes

Syntax

screen.availWidth

Return Value

Type	Description
Number	The width of the user's screen, in pixels

Example

The following code shows how to get the available width of your screen.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {<!--from  w  ww . j a v a  2  s .  com-->
    var x = "Available Width: " + screen.availWidth + "px";
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

More Examples

All screen properties in one example


<!DOCTYPE html>
<html>
<body>
<div id="demo"></div>
<!--   w  w w.j  a va2s.co m-->
<script>
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.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

The code above is rendered as follows: