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

Learn, how to get the screen size, the current web page size and the browser window size in JavaScript that the user is working on?
Submitted by Pratishtha Saxena, on June 10, 2022

When we talk about the screen size, it means that the size of the monitor screen.
When we talk about the window size, it means that the size of the browser window.
When we talk about the current web page size, it means that the size of the content inside the browser window.

There are different properties through which these sizes can be determined.

Screen Size:

To get the screen size, i.e., the size of the monitor screen on which you are working, height and width properties are used.

Content Size:

To get the content size, i.e., the content inside the browser window, innerHeight and innerWidth properties are used.

Window Size:

To get the window size, i.e., the browser window on which you are working, outerHeight and outerWidth properties are used.

Let's understand this well by using them all in an example.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
   </head>
   <body>
      <button>Get Size</button><br><br>
      <div id="screenSize"></div>
      <div id="contentSize"></div>
      <div id="windowSize"></div>
   </body>
   <script>
      let btn = document.querySelector('button');
      let screenSize = document.querySelector('#screenSize');
      let contentSize = document.querySelector('#contentSize');
      let windowSize = document.querySelector('#windowSize');
      
      btn.addEventListener('click', () => {
         screenSize.innerText = `Screen Height: ${screen.height} - Screen Width: ${screen.width}`;
         contentSize.innerText = `Content Height: ${window.innerHeight} - Content Width: ${window.innerWidth}`;
         windowSize.innerText = `Window Height: ${window.outerHeight} - Window Width: ${window.outerWidth}`;
      
      });         
   </script>   
</html>

Output: