Get the size of the screen, current web page and browser window in JavaScript

Javascript Web Development Front End Technology

To get the current screen size of a web page, use the window.inner. We can also use the window.outerWidth and window.outerHeight as shown below to get the outer width and height of the web browser windows.

We will see two examples −

Get the Inner Width and Height
Get the Outer Width and Height

Get the Inner Width and Height

To get the current screen size of a web page, use the window.innerWidth and window.innerHeight −

var wd = window.innerWidth;
var ht = window.innerHeight;

Example

Let us see an example −


<!DOCTYPE html>
<html>
<body>
   <h1>Current Browser Window Size</h1>
   <p>Following is the size of the current window:</p>
   <p id="test"></p>
   <script>
      var wd = window.innerWidth;
      var ht = window.innerHeight;
      var x = document.getElementById("test");
      x.innerHTML = "Width = " + wd + ", Height = " + ht + ".";
   </script>
</body>
</html>

Output

Get the Outer Width and Height

Use the window.outerWidth and window.outerHeight as shown below to get the outer width and height of the web browser windows −

var wd = window.outerWidth;
var ht = window.outerHeight;

Example

Let us see the example −


<!DOCTYPE html>
<html>
<body>
   <h1>Outer Width and Height</h1>
   <p>Following is the size:</p>
   <p id="test"></p>
   <script>
      var wd = window.outerWidth;
      var ht = window.outerHeight;
      var x = document.getElementById("test");
      x.innerHTML = "Width = " + wd + ", Height = " + ht + ".";
   </script>
</body>
</html>