Écran(s)

L'origine des coordonnées de l'écran est le coin supérieur gauche.
L'axe des ordonnées est orienté vers le bas et l'axe des abscisses vers la droite.

Taille de l'écran

window.screen.top =

Distance en pixels de l'origine de cet écran depuis le haut de l'écran étendu.
Propriété à tester dans une configuration multi-écran, sinon la valeur est égale à 0.

window.screen.left =

Distance en pixels de l'origine de cet écran depuis le côté gauche de l'écran étendu.
Propriété à tester dans une configuration multi-écran, sinon la valeur est égale à 0.

window.screen.height =

Hauteur de l'écran courant en pixels.

window.screen.width =

Largeur de l'écran courant en pixels.

Taille disponible de l'écran

C'est la taille de l'éran moins les éléments fixes de l'écran comme la barre de menu sous OS X et la barre des tâches sous Windows.
Essayez de déplacer la barre des tâches de Windows à gauche ou en haut de l'écran et observer les valeurs.
Essayer de passer le navigateur en plein écran et observer les valeurs.

window.screen.availTop =

Ordonnée du premier pixel disponible qui n'est pas occupé par un élément d'interface permanent.

window.screen.availLeft =

Abscisse du premier pixel disponible qui n'est pas occupé par un élément d'interface permanent.

window.screen.availHeight =

Hauteur disponible de l'écran courant en pixels.

window.screen.availWidth =

Largeur disponible de l'écran courant en pixels.

Profondeur de l'écran

window.screen.pixelDepth =  bits

La quantification des pixels de l'écran, soit le nombre de bits par pixels pour représenter en autre les nuances de gris ou de couleurs.

window.screen.colorDepth =  bits

La quantification des pixels de l'écran pour représenter les nuances de couleurs. A tester sur des écrans noir & blanc comme des liseuses.

window.screen.orientation.type = ""
window.screen.orientation.angle = °

Orientation de l'écran : paysage ou portrait.

Fenêtre

window.outerWidth =

Largeur de fenêtre du navigateur

window.outerHeight =

Hauteur de la fenêtre du navigateur

window.innerWidth =

Largeur de fenêtre du navigateur hors bord et barre de défilement

window.innerHeight =

Hauteur de fenêtre du navigateur hors bord, onglets, menus, barre d'adresse et barre de défilement

document.body.scrollWidth =

Largeur totale de la page en abscisse

document.body.scrollHeight =

Hauteur totale de la page en ordonnée

window.pageXOffset =

Défilement de la page en abscisse

window.pageYOffset =

Défilement de la page en ordonnée

actualiser

Écran physique

window.devicePixelRatio =

zoom =

zoom =

zoom =

-

document.documentElement.clientWidth =

document.documentElement.clientHeight =

document.body.scrollTop =

document.body.scrollLeft =

Events handler Screen.onorientationchange A handler for the orientationchange events. Methods Screen.lockOrientation Lock the screen orientation (only works in fullscreen or for installed apps) Screen.unlockOrientation Unlock the screen orientation (only works in fullscreen or for installed apps) Methods inherit from EventTarget EventTarget.addEventListener() Register an event handler of a specific event type on the EventTarget. EventTarget.removeEventListener() Removes an event listener from the EventTarget. EventTarget.dispatchEvent() Dispatch an event to this EventTarget. Example if (screen.pixelDepth < 8) { // use low-color version of page } else { // use regular, colorful page }

Taille des éléments

* offsetHeight is a measurement in pixels of the element's CSS height, including border, padding and the element's horizontal scrollbar.

iframe.offsetWidth =  =

iframe.offsetHeight =  = 350 + 5 x 2 + 6 x 2

* clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.

iframe.clientWidth =

iframe.clientHeight =

scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element's padding, but not its border, margin or horizontal scrollbar.

iframe.scrollWidth =

iframe.scrollHeight =

Margin: 2 x 8px; padding : 2 x 6px; Hauteur de la div : 500px

Dernière mise à jour : 1er juillet 2020