ちょっとややこしいdocument、window、screenの話

JavaScript

jQueryで画面の高さを取得する時、取得方法がいろいろあって
どれを使うべきか悩むことがあります。
主に

  • $(document).height()
  • $(window).height()
  • screen.height
  • screen.availHeight

これらはそれぞれ

$(document).height(): 読み込んだページの全高さ
$(window).height(): ブラウザ中のスクロール部分の高さ
screen.height: デバイスの画面のサイズ
screen.availHeight: デバイスの画面サイズからOSのメニューバーやタスクバーを引いた高さ

なので、
$(document).height() > $(window).height()のときに、すべてを表示しようとすると、画面のスクロールが必要となります。

$(window).height()はブラウザのディベロッパーツールを表示したり、ブラウザのツールバーを表示するとサイズが小さくなります。


参照元

javascript - Difference between screen.availHeight and window.height() - Stack Overflow