Introduction

In this article, I explain how to get user screen resolution or client machine resolution.
Coding
Get_Resolution.html
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Get_Resolution_Demo.aspx.cs" Inherits="Get_Resolution.Get_Resolution_Demo" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <script type="text/javascript">
  7. function getResolution()
  8. {
  9. var txtwidth = document.getElementById("txtwidth");
  10. var txtheight = document.getElementById("txtheight");
  11. txtwidth.value = screen.width;
  12. txtheight.value = screen.height;
  13. }
  14. </script>
  15. <style type="text/css">
  16. #txtwidth
  17. {
  18. width: 71px;
  19. }
  20. #txtheight
  21. {
  22. width: 68px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <form id="form1" runat="server">
  28. <h3 style="color: #660033">Get Resolution of Client Machine in JavaScript</h3>
  29. <div id="showdiv" style="font-weight: bold; height: 90px;";>
  30. Screen Width: <input id="txtwidth" type="text" />px<br />
  31. <br />
  32. Screen Height: <input id="txtheight" type="text" />px<br />
  33. <br />
  34. </div>
  35. </form>
  36. <p>
  37. <input id="show" type="button" value="Get Resolution" onclick="getResolution()" /></p>
  38. </body>
  39. </html>
Output 1
First-image.jpg
Click on the "Get Resolution" button.
Output 2
second-image.jpg
For more information, download the attached sample applications.