How to get the size of screen, current web page and browser window using jQuery?

jQuery can be used to get the dimensions of the current page. The dimensions include the screen, viewport and document height, and width.

  • Getting the window dimensions: Window size is the size of the browser window. This is the size that changes when the browser is resized. The windows height and width can be accessed with the height() and width() method after selecting the window object.
  • Getting the document dimensions: Document size is the size of the HTML document. The documents height and width can be accessed with the height() and width() method after selecting the document object.
  • Getting the screen dimensions: Screen size is the total size of the user’s screen. The screen’s height and width can be accessed with the height and width property.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<head>
    <title>
        Get the size of the screen, current
        web page and browser window using
        jQuery?
    </title>
      
    <script src=
    </script>
</head>
  
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <b>
        How to get the size of the screen, 
        current web page and browser
        window using jQuery?
    </b>
      
    <p>Window Height is: 
        <span class="windowHeight"></span>
    </p>
      
    <p>Windows Width is: 
        <span class="windowWidth"></span>
    </p>
      
    <p>Document Height is: 
        <span class="documentHeight"></span>
    </p>
      
    <p>Document Width is: 
        <span class="documentWidth"></span>
    </p>
      
    <p>Screen Height is: 
        <span class="screenHeight"></span>
    </p>
      
    <p>Screen Width is: 
        <span class="screenWidth"></span>
    </p>
      
    <button id="btn">
        Click Here to check the dimensions
        of the page:
    </button>
      
    <script type="text/javascript">
        $("#btn").on("click", function () {
            windowHeight = $(window).height();
            windowWidth = $(window).width();
            documentHeight = $(document).height();
            documentWidth = $(document).width();
            screenHeight = screen.height;
            screenWidth = screen.width;
  
            document.querySelector('.windowHeight').textContent
                        = windowHeight;
            document.querySelector('.windowWidth').textContent
                        = windowWidth;
            document.querySelector('.documentHeight').textContent
                        = documentHeight;
            document.querySelector('.documentWidth').textContent
                        = documentWidth;
            document.querySelector('.screenHeight').textContent
                        = screenHeight;
            document.querySelector('.screenWidth').textContent
                        = screenWidth;
        });
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Before clicking the button:
    before-click
  • After clicking the button:
    after-click


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.