How to get the width of device screen in JavaScript ? - GeeksforGeeks

28 Jun, 2019
Given an HTML document which is running on a device. The task is to find the width of the working screen device using JavaScript.
Example 1: This example uses window.innerWidth to get the width of device screen. The innerWidth property is used to return the width of the device.
<!DOCTYPE HTML> <html>     <head>         <title>             How to get the device screen width in JavaScript ?        </title>    </head>           <body style = "text-align:center;">               <h1 style = "color:green;" >             GeeksForGeeks        </h1>              <p id = "GFG_UP" style =             "font-size: 19px; font-weight: bold;">        </p>                  <button onclick = "GFG_Fun()">            click here        </button>                  <p id = "GFG_DOWN" style =            "color: green; font-size: 24px; font-weight: bold;">        </p>                  <!-- Script to display the device screen width -->        <script>            var el_up = document.getElementById("GFG_UP");            var el_down = document.getElementById("GFG_DOWN");                          el_up.innerHTML = "Click on the button to get the"                    + " width of the device's screen";                           function GFG_Fun() {                var width = window.innerWidth;                el_down.innerHTML = width + " pixels";            }        </script>     </body> </html>                    
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example uses document.documentElement.clientWidth method to get the width of device screen.
<!DOCTYPE HTML> <html>     <head>         <title>             How to get the device screen width in JavaScript ?        </title>    </head>           <body style = "text-align:center;">               <h1 style = "color:green;" >             GeeksForGeeks        </h1>              <p id = "GFG_UP" style =             "font-size: 19px; font-weight: bold;">        </p>                  <button onclick = "GFG_Fun()">            click here        </button>                  <p id = "GFG_DOWN" style =            "color: green; font-size: 24px; font-weight: bold;">        </p>                  <!-- Script to display the device screen width -->        <script>            var el_up = document.getElementById("GFG_UP");            var el_down = document.getElementById("GFG_DOWN");                          el_up.innerHTML = "Click on the button to get the"                    + " width of the device's screen";                           function GFG_Fun() {                el_down.innerHTML =                    document.documentElement.clientWidth + " pixels";            }        </script>     </body> </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript