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

23 Apr, 2019
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:
<!DOCTYPE html><head>    <title>        Get the size of the screen, current        web page and browser window using        jQuery?    </title>          <script src=        "https://code.jquery.com/jquery-2.2.4.min.js">    </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>                    
Output:
Before clicking the button:
After clicking the button:
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to get the ID of the clicked button using JavaScript / jQuery ?
jQuery | children() with Examples
Top 10 Front End Developer Skills That You Need 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?