Get Size of Screen, Web Page and Browser Window in JavaScript

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>

Output

Updated on: 2022-11-01T13:07:30+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements