Разница между screen.availHeight и window.height()

Я выполняю следующий Javascript в своем браузере (Firefox).

  • console.debug( "Высота экрана =" + screen.availHeight);//выводит 770

  • console.debug( "Window Height =" + $(window).height());//выводит 210 (я также использую jQuery)

В чем разница между этими двумя? Является ли 770 в пикселях и 210 мм?

Аналогично, когда я пишу $(document).height() и $(window).height(), есть разница. В чем причина?

Ответы

Ответ 1

window.outerHeight

Это высота окна на экране, она включает в себя страницу и все видимые полосы браузера (местоположение, статус, закладки, название окна, границы,...).

Этот не тот же, что и jQuery $(window).outerHeight().

window.innerHeight или $(window).height()

Это высота окна просмотра, показывающая веб-сайт, только контент, никаких баров браузера.

document.body.clientHeight или $(document).height()

Это высота вашего документа, отображаемая в окне просмотра. Если он больше, чем $(window).height(), вы получаете прокрутки для прокрутки документа.

screen.availHeight

Это высота, которую может иметь окно браузера, если она максимизирована, включая полосы браузера. Поэтому, когда окно максимизируется, screen.availHeight === window.outerHeight

screen.height

Он просто соответствует разрешению экрана. Таким образом, на экране 1920 × 1080 screen.height будет 1080.

screen.availHeight равен [ screen.height + барам операционной системы], например панели задач в Windows, док-станции и меню в OS X, или независимо от того, что фиксировано сверху или снизу экрана, если вы используете Linux.