Difference between $(window).width() vs $(document).width()
From the documentation of width()
:
This method is also able to find the width of the window and document.
$(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document
Simple jsFiddle Demo
In the demo, I have set html { width: 1000px; }
, which is bigger than the viewport.
The width of the body of your HTML page is a third value. $('body').width()
can also differ from the other two (try body { margin: 100px; }
for example).
You are correct. the window
is the viewable area of the browser. The document
is the actually body of the page. So your document
could extend far beyond the window
Well, the
window
is the first thing that gets loaded into the browser. Thiswindow
object has the majority of the properties likelength
,innerWidth
,innerHeight
,name
, if it has been closed, its parents, and more.What about the document object then?
The
document
object is your html document that will be loaded into the browser. Thedocument
actually gets loaded inside thewindow
object and has properties available to it like title, URL, cookie, etc. What does this really mean? That means if you want to access a property for thewindow
it iswindow.property
, if it isdocument
it iswindow.document.property
which is also available in short asdocument.property
.
So in conclusion the document could be smaller than the window.
FROM: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/