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>