Question

Consider these two functions:

1. jQuery(document).width()
2. jQuery(window).width()

(1) gives you the width of the web page, and (2) gives you the width of the browser viewport, roughly speaking.

But let’s say we have a web page that is 800 pixels wide.

If the browser window width is less than 800 pixels, method (1) always returns 800. This is good.

But if the browser window width is greater than 800 pixels, method (1) returns the same as (2), and NOT 800. So the value of (1) is dependent of the browser window. This is not good.

My question is: given that you can’t control the browser window size, and the browser window width in most cases is greater than the web page width, how do I get the real web page width, using javascript/jquery?

Answer 1

AFAIK, browser adds scroll bars, when it cant render certain block in current window width.
So, if you have a fixed-width main content block (which I’d advise you to), you can get it’s width – it will always stay the same.

<div id="content">
<!-- Main block -->
</div>

CSS:

#content{
   width:800px;
   margin:0 auto;
}

JS:

$("#content").width()