How To Get Resolution Of Client Machine in JavaScript

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.