web-dev-qa-db-ja.com

screen.availHeightとwindow.height（）の違い

ブラウザ（Firefox）で次のJavascriptを実行しています。

  1. console.debug（ "画面の高さ=" + screen.availHeight）; //出力77

  2. console.debug（ "Window Height =" + $（window）.height（））; //出力21（jQueryも使用しています）

2つの違いは何ですか？ 770ピクセルと210ミリメートルですか？

同様に、$(document).height()と$(window).height()を書くと、違いがあります。理由は何ですか？

javascriptjquerywindowdocument
56
Akshay

_window.outerHeight_

画面上のウィンドウの高さであり、ページとすべての表示可能なブラウザのバー（場所、ステータス、ブックマーク、ウィンドウタイトル、境界線など）が含まれます。

これはnot jQueryの$(window).outerHeight()と同じです。

_window.innerHeight_または$(window).height()

Webサイトを表示するのはビューポートの高さで、コンテンツのみを表示し、ブラウザのバーは表示しません。

_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を使用します。

161
jigfox