Get the size of a document when window resize

Question

I can find the size of window, when i resize my window.like this

<script type="text/javascript">

    jQuery(window).resize(function () {
      var width = jQuery(window).width();
      var height = jQuery(window).height();
      console.log(width);
      console.log(height);
    })
</script>

Now i want to get the document size when i resize the window. How can i get the size every time when resize the window.

Is this a duplicate question of [this?](http://stackoverflow.com/questions/3044573/using-jquery-to-get-size-of-viewport) — Pete Uh, Mar 07 '13 at 11:25

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

$(window).width(); // returns width of browser viewport

$(document).width(); // returns width of HTML document

http://api.jquery.com/width/

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 07 '13 at 11:25

Stefan

5,644
4
24
31

I know $(document).width() and $(document).height() gives the width and height of HTML document, but when the window is resized, is there any way to resize the html document. – Ranjit Mar 07 '13 at 11:33
Declare the width of your content using `percentage` or `em` and the site will scale to the window width. – Stefan Mar 07 '13 at 12:31

Guffa · Answer 2 · 2013-03-07T11:34:33.733

You can use the document object:

var width = jQuery(document).width();
var height = jQuery(document).height();

Demo: http://jsfiddle.net/wyHwp/

As you see, the size of the document is the same value while the window is smaller. When the window gets larger than the document needs, the document will stretch to the size of the window.

You can also get the size of the document.body element:

var width = jQuery(document.body).width();
var height = jQuery(document.body).height();

The difference is that you get the height of the body element even if the window is higher, i.e. the body element doesn't automatically stretch to the bottom of the window.

score 2 · Answer 3 · answered Mar 07 '13 at 11:37

Not sure if you want this:

jQuery(window).resize(function () {
   var winwidth = jQuery(window).width();
   var winheight = jQuery(window).height();
   var docwidth = jQuery(document).width();
   var docheight = jQuery(document).height();
   console.log('window width is -> ' + winwidth + 'window height is -> ' + winheight);
   console.log('document width is -> ' + docwidth + 'document height is -> ' + docheight);
}).resize();
//-^^^^^^^^----this will log everytime on doc ready

score 1 · Answer 4 · answered Mar 07 '13 at 11:27

Modify your example code to get it at the same time.

<script type="text/javascript">

    jQuery(window).resize(function () {
      var width = jQuery(window).width();
      var height = jQuery(window).height();
      var documentWidth = jQuery(document).width();
      var documentHeight = jQuery(document).height();
      console.log(width);
      console.log(height);
    })
</script>

Get the size of a document when window resize

4 Answers4

Linked

Related