Create a sample ASP.NET web application and name it as JSscreenTest in Visual Studio 2008. Now, add a button, label and add below javascript code as shown below:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function showScreenData() {
document.getElementById("lblScreenDetails").innerText =
"Total Height: " + screen.height
+" Total Width: " + screen.width
+" Available Height: " + screen.availHeight
+" Available Width: " + screen.availWidth
+" Available Pixel Depth : " + screen.pixelDepth
+" Available Color Depth : " + screen.colorDepth
+" Buffer Depth : " + screen.bufferDepth;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:Button ID="btnScreenData" runat="server" Text="Get Screen Details" OnClientClick="return showScreenData()" />
<br />
<asp:Label ID="lblScreenDetails" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
Now, run the application. It will show the properties of the screen like width, pixel depth etc as shown below:
This way, we can access user's screen properties for adjusting images/page size accordingly.
The main difference between properties availHeight/availWidth and height/width is that availHeight/availwidth gives available height/width after reducing the space consumed by taskbar and other windows on screen, whereas height/width gives total height/width of the screen.
By using screen object, we can access below properties of the user's screen.
| Property Name | Description |
| availHeight | Available Height |
| availWidth | Available Width |
| bufferDepth | -- |
| colorDepth | -- |
| deviceXDPI | -- |
| deviceYDPI | -- |
| height | Screen height |
| width | Screen width |
| logicalXDPI | -- |
| logicalYDPI | -- |
| fontSmoothingEnabled | -- |
| updateInterval | -- |
I am ending up the things here. I hope this article will be helpful for all.
Join the conversation! Your thoughts help the community grow.