Introduction

In this article, I will explain how to get the user's screen resolution or client machine's resolution using TypeScript.
Use the following procedure.
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#.
Give the name of your application as "Resolution_Of_ClientMachine" and then click "Ok".
application-name.jpg
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 files and the aspx page.
solution-explorer.jpg

Program Coding

Resolution.ts
  1. class Get_Resolution
  2. {
  3. Resolution()
  4. {
  5. var txtwidth = ( < HTMLTextAreaElement > document.getElementById("txtwidth"));
  6. var txtheight = ( < HTMLTextAreaElement > document.getElementById("txtheight"));
  7. txtwidth.value = screen.width.toString();
  8. txtheight.value = screen.height.toString();
  9. }
  10. }
  11. window.onload = () =>
  12. {
  13. var bttnshow = document.getElementById("show");
  14. bttnshow.onclick = function()
  15. {
  16. var obj = new Get_Resolution();
  17. obj.Resolution();
  18. }
  19. };
default.htm
  1. <!DOCTYPE html>
  2. <html lang="en"
  3. xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta charset="utf-8" />
  6. <title>TypeScript HTML App</title>
  7. <link rel="stylesheet" href="app.css" type="text/css" />
  8. <script src="Resolution.js"></script>
  9. <style type="text/css">
  10. #txtwidth
  11. {
  12. width: 71px;
  13. }
  14. #txtheight
  15. {
  16. width: 68px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <form id="form1" runat="server">
  22. <h3 style="color: #FF3300">Resolution of Local Machine in TypeScript</h3>
  23. <div id="showdiv" style="font-weight: bold; height: 90px;";>
  24. Screen Width:
  25. <input id="txtwidth" type="text" />px
  26. <br />
  27. <br />
  28. Screen Height:
  29. <input id="txtheight" type="text" />px
  30. <br />
  31. <br />
  32. </div>
  33. </form>
  34. <p>
  35. <input id="show" type="button" value="Get Resolution" />
  36. </p>
  37. </body>
  38. </html>
Resolution.js
  1. var Get_Resolution = (function() {
  2. function Get_Resolution() {}
  3. Get_Resolution.prototype.Resolution = function() {
  4. var txtwidth = (document.getElementById("txtwidth"));
  5. var txtheight = (document.getElementById("txtheight"));
  6. txtwidth.value = screen.width.toString();
  7. txtheight.value = screen.height.toString();
  8. };
  9. return Get_Resolution;
  10. })();
  11. window.onload = function() {
  12. var bttnshow = document.getElementById("show");
  13. bttnshow.onclick = function() {
  14. var obj = new Get_Resolution();
  15. obj.Resolution();
  16. };
  17. };
Output 1
output1.jpg
Click on the "Get Resolution" button.
Output 2
output2.jpg
For more information, download the attached sample applications.