Search code examples
javascriptjquerywindowdocument

Difference between screen.availHeight and window.height()

I am executing the following Javascript on my browser (Firefox).

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

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

What is the difference between the two? Is 770 in pixels and 210 in mm?

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

Solution

  • window.outerHeight

    It's the height of the window on screen, it includes the page and all the visible browser's bars (location, status, bookmarks, window title, borders, …).

    This not the same as jQuery's $(window).outerHeight().

    window.innerHeight or $(window).height()

    It's the height of the viewport that shows the website, just the content, no browser's bars.

    document.body.clientHeight or $(document).height()

    It's the height of your document shown in the viewport. If it is higher than $(window).height() you get the scrollbars to scroll the document.

    screen.availHeight

    It's the height the browser's window can have if it is maximized, including the browser's bars. So when the window is maximized, screen.availHeight === window.outerHeight

    screen.height

    It simply matches the screen's resolution. So on a 1920×1080 screen, screen.height will be 1080.

    screen.availHeight is equal to [screen.height + the operating system's bars], like the taskbar on Windows, the dock and menu on OS X, or whatever is fixed on top or bottom of your screen if you're using Linux.