Javascript Screen Tutorial
View more Tutorials:
When your browser runs on a window.screen computer. It is the object that represents the computer screen. When your browser runs on a window.screen telephone , it is the object that represents the phone screen ....
The properties of window.screen:
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
- screen.colorDepth
- screen.pixelDepth
| Property | Description |
| screen.width | Screen width in pixels |
| screen.height | Screen height in pixels. |
| screen.availWidth | Screen width in pixels, minus the space of interface features, for example, Taskbar |
| screen.availHeight | Screen height in pixels, minus the space of interface features, for example, Taskbar |
| screen.colorDepth | Returns the number of bits used to display a color |
| screen.pixelDepth | Returns the number of pixel depth (bit depth) of the screen |
A computer screen using Windows 7 operating system:
A computer screen using the Ubuntu operating system:
For example:
screen-example.html
<!DOCTYPE html>
<html>
<head>
<title>Screen Example</title>
<meta charset="UTF-8">
</head>
<body>
<h1>window.screen</h1>
<button onClick="showInfos()">Show Infos</button>
<textarea name="name" style="width:100%;margin-top:10px;"
rows="8" id="log-area"></textarea>
<script>
function showInfos() {
var logArea = document.getElementById("log-area");
logArea.value = "";
logArea.value += "screen.width= " + screen.width +"\n";
logArea.value += "screen.height= " + screen.height +"\n";
logArea.value += "screen.availWidth= " + screen.availWidth +"\n";
logArea.value += "screen.availHeight= " + screen.availHeight +"\n";
logArea.value += "screen.colorDepth= " + screen.colorDepth +"\n";
logArea.value += "screen.pixelDepth= " + screen.pixelDepth +"\n";
}
showInfos();
</script>
</body>
</html>
*
