Inroduction
In this article I will explain how to get user screen resolution or local machine resolution.
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
![application-name.jpg]()
Give the name of your application as "Get_Resolution" and then click "Ok".
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css file and aspx page.
![solution-explorer.jpg]()
Coding
Resolution.ts
class Get_Resolution
{
Resolution()
{
var txtwidth = <HTMLTextAreaElement>document.getElementById('txtwidth');
var txtheight = <HTMLTextAreaElement>document.getElementById('txtheight');
txtwidth.value= screen.width.toString();
txtheight.value = screen.height.toString();
}
}
window.onload = () =>
{
var bttnresolution = document.getElementById("show");
var obj = new Get_Resolution();
bttnresolution.onclick = function ()
{
obj.Resolution();
}
};
Get_Resolution_Demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Get_Resolution_Demo.aspx.cs" Inherits="Get_Resolution.Get_Resolution_Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Resolution.js" type="text/javascript"></script>
<style type="text/css">
#txtwidth
{
width: 71px;
}
#txtheight
{
width: 68px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h3 style="color: #0033CC">Get Resolution of Local Machine in TypeScript</h3>
<div id="showdiv" style="font-weight: bold; height: 90px;";>
Screen Width: <input id="txtwidth" type="text" />px<br />
<br />
Screen Height: <input id="txtheight" type="text" />px<br />
<br />
</div>
</form>
<p>
<input id="show" type="button" value="Get Resolution" /></p>
</body>
</html>
Resolution.js
var Get_Resolution = (function () {
function Get_Resolution() { }
Get_Resolution.prototype.Resolution = function () {
var txtwidth = document.getElementById('txtwidth');
var txtheight = document.getElementById('txtheight');
txtwidth.value = screen.width.toString();
txtheight.value = screen.height.toString();
};
return Get_Resolution;
})();
window.onload = function () {
var bttnresolution = document.getElementById("show");
var obj = new Get_Resolution();
bttnresolution.onclick = function () {
obj.Resolution();
};
};
//@ sourceMappingURL=Resolution.js.map
Output 1
![first-image.jpg]()
Click on the "Get Resolution" button.
Output 2
![result.jpg]()
For more information, download attached sample application.