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

12 Sep, 2019
Given an HTML document which is running on a device. The task is to find the height of the working screen device using JavaScript.Prerequisite – How to get the width of device screen in JavaScript ?
Example 1: This example uses window.innerHeight property to get the height of the device screen. The innerHeight property is used to return the height of the device.
<!DOCTYPE HTML><html>  <head>    <title>        How to get the device screen Height 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 Height -->    <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" +           " Height of the device's screen";          function GFG_Fun() {            var Height = window.innerHeight;            el_down.innerHTML = Height + " pixels";        }    </script></body>  </html>
Output:Before clicking on the button:After clicking on the button:
Example 2: This example uses document.documentElement.clientHeight method to get the Height of device screen.
<!DOCTYPE HTML><html>  <head>    <title>        How to get the device screen Height 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 Height -->    <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" +          " Height of the device's screen";          function GFG_Fun() {            el_down.innerHTML =                document.documentElement.clientHeight + " 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.
Comments
Old Comments
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
Difference between var, let and const keywords in JavaScript
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?