JS “Window” width-height vs “screen” width-height?

问题:

I am wondering a little when I look at this code:

// Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

...

// Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

What is the difference between $(document).height(); and $(window).height();?

回答1:

$(document).height is the inside area of the viewport, essentially from the bottom of your toolbar/url bar to your status bar/bottom scroll bar/bottom of the window. The $(window).height gets the entire height of the window, including things like the address bar and scroll bars.

回答2:

Window is the top level client side object, which contains the document. This jsFiddle shows that both $(window).height() and $(document).height() return the same value: http://jsfiddle.net/jackrugile/5xSuv/

Window is the size of the viewport and does not include any of the chrome or browser interface, if I am not mistaken. I believe that the values of both will always be the same, unless you are referencing something like an iframe within a window.

回答3:

The jsfiddle code by @jackrugile returns the same values for document and window because the jsfiddle code is running inside an iframe.

To make things more clear if not running Iframes -

• $(window).height() will return the height of the viewport area excluding the height of any of the toolbars present on the page. The same can be experimented here by opening a firebug console (if firefox) or google chrome console pressing F12 key and firing $(window).height() which will always vary if add / remove any of the toolbars from browser or simply change the height of the firebug or chrome debugger.
  
  It will always return the height of your browser window substracting the height of all toolbars.
  
  
• $(document).height() will return the height of your page contents, how long your page is.
  The height of toolbars or browser window (if re-sized or not) doesn't affects it's value.
  Before posting my answer it was around 2407 in chrome and 2410 in firefox.

Hope it helps and make things more clear.

回答4:

Screen -- Your screen: size value changes with your monitor size.

screen.availWidth  //There is no screen.height 

Window or Document -- The Browser's window (the browser viewport, NOT including toolbars and scrollbars). Ignores the invisible scrollable part if the page is scrollable. Use 'window' for IE9 and above, its simple.

window.innerHeight    //IE9, Chrome, Safari, Firefox
document.documentElement(or body).clientHeight    //IE 8,7,6,5

Note: Window and Document are not the same. Document object (from DOM) is a property of the Window object (from BOM). But give out the same size. From W3Schools, I would like to think that 'Window' is the notation for the new browser versions (IE9, Chrome, Firefox etc) and 'document' is for IE 8,7,6,5.

http://www.w3schools.com/js/js_window.asp, and also tested the above with a simple aspx page on differently sized monitors.