Difference between screen.availHeight and window.height

Question

Hi,

I am executing the following javascript on my browser(firefox)

1.console.debug("Screen height = "+ screen.availHeight); //output 770

2.console.debug("Window Height ="+ $(window).height()); //output 210 (i am using jQuery as well)

What is the difference between the two? Are units of 770 is pixels and 210 is mm ?

Similarly, when I write $(document).height() and $(window).height() , there is a difference . What is the reason ?

Answer 1

• screen.availHeight is the height the Browser window can have if it is maximized. (incl all the window decoration of the browser like statusbar, menubars and titlebar)
• $(window).height() is the height of the viewport that shows the webseite. (excl your toolbars and statusbar and stuff like this)
• $(document).height() is the height of your document shown in the viewport. if it is higher than $(window).height() you get the scrollbars to scroll the document.

All values are pixels

update

the screen object has nothing todo with you website. Take a look at screen.height and screen.width. Do you recognize them? They are the pixels your display can display. screen.availHeight is screen.height minus Taskbar if you're on windows, minus Dock and Menubar if you're on a mac and minus whatever is fixed on top or bottom of your screen if you're using linux.

update2 here an image to show the differences: