web-dev-qa-db-fra.com

Différence entre screen.availHeight et window.height ()

J'exécute le Javascript suivant sur mon navigateur (Firefox).

  1. console.debug ("Screen height =" + screen.availHeight); // sorties 77

  2. console.debug ("Window Height =" + $ (window) .height ()); // sorties 21 (j'utilise aussi jQuery)

Quelle est la différence entre les deux? Est-ce que 770 en pixels et 210 en mm?

De même, lorsque j'écris $(document).height() et $(window).height(), il y a une différence. Quelle est la raison?

javascriptjquerywindowdocument
56
Akshay

window.outerHeight

C'est la hauteur de la fenêtre à l'écran, elle comprend la page et toutes les barres visibles du navigateur (emplacement, statut, signets, titre de la fenêtre, bordures,…).

Ceci pas identique à $(window).outerHeight() de jQuery.

window.innerHeight Ou $(window).height()

C'est la hauteur de la fenêtre d'affichage qui montre le site Web, juste le contenu, pas de barres de navigateur.

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

C'est la hauteur de votre document affichée dans la fenêtre. S'il est supérieur à $(window).height(), vous obtenez les barres de défilement pour faire défiler le document.

screen.availHeight

C'est la hauteur que la fenêtre du navigateur peut avoir si elle est agrandie, y compris les barres du navigateur. Ainsi, lorsque la fenêtre est agrandie, screen.availHeight === window.outerHeight

screen.height

Il correspond simplement à la résolution de l'écran. Ainsi, sur un écran 1920 × 1080, screen.height Sera 1080.

screen.availHeight Est égal à [screen.height + Les barres du système d'exploitation], comme la barre des tâches sous Windows, le dock et le menu sous OS X, ou tout ce qui est fixé en haut ou en bas de votre écran si vous utilise Linux.

161
jigfox