web-dev-qa-db-de.com

Unterschied zwischen screen.availHeight und window.height ()

Ich führe folgendes Javascript in meinem Browser (Firefox) aus.

  1. console.debug ("Bildschirmhöhe =" + screen.availHeight); // gibt 77 aus

  2. console.debug ("Window Height =" + $ (window) .height ()); // gibt 21 aus (ich benutze auch jQuery)

Was ist der Unterschied zwischen den beiden? Ist 770 in Pixel und 210 in mm?

Ebenso gibt es einen Unterschied, wenn ich $(document).height() und $(window).height() schreibe. Was ist der Grund?

56
Akshay

window.outerHeight

Es ist die Höhe des Fensters auf dem Bildschirm, es enthält die Seite und alle sichtbaren Leisten des Browsers (Position, Status, Lesezeichen, Fenstertitel, Rahmen usw.).

Dies ist nicht dasselbe wie jQueries $(window).outerHeight().

window.innerHeight Oder $(window).height()

Es ist die Höhe des Ansichtsfensters, in dem die Website angezeigt wird, nur der Inhalt, keine Browser-Leisten.

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

Es ist die Höhe Ihres Dokuments, die im Ansichtsfenster angezeigt wird. Wenn es höher als $(window).height() ist, können Sie mit den Bildlaufleisten durch das Dokument scrollen.

screen.availHeight

Es ist die Höhe, die das Browserfenster haben kann, wenn es maximiert ist, einschließlich der Balken des Browsers. Wenn also das Fenster maximiert ist, screen.availHeight === window.outerHeight

screen.height

Es entspricht einfach der Bildschirmauflösung. Auf einem 1920 × 1080-Bildschirm lautet screen.height Also 1080.

screen.availHeight Entspricht [screen.height + Den Leisten des Betriebssystems], wie z. B. die Taskleiste unter Windows, das Dock und das Menü unter OS X oder was auch immer oben oder unten auf Ihrem Bildschirm angezeigt wird benutze Linux.

161
jigfox