web-dev-qa-db-fra.com

Viewport vs Window Vs Document

Dans le code ci-dessous,

document.documentElement.clientWidth
   1349
document.documentElement.clientHeight
   363
window.innerWidth
   1366
window.innerHeight
   363
window.screen.height
   768
window.screen.width
   1366

Ainsi, mon écran de bureau mesure 1366 px de large et 768 px de hauteur.

J'ai appris ça,

les dimensions de la fenêtre sont référencées à l'aide de document.documentElement.clientWidth et document.documentElement.clientHeight.

les dimensions de la fenêtre sont référencées à l'aide de window.innerWidth et window.innerHeight.

1) Quelle est la différence entre la fenêtre d'affichage et le document?

2) quand window.onload Contre document.onload être invoqué?

javascripthtmlcssdom
24
overexchange

Les choses sont différentes lorsque votre page est plus grande que votre écran.

La fenêtre est la zone rectangulaire où les choses sont visibles pour vous. Le document peut être plus grand que cela et vous verrez des barres de défilement si c'est le cas.

Quant à votre deuxième question: window.onload vs document.onload

Voici un résumé.

Fenêtre d'affichage: C'est l'écran de votre appareil.

Fenêtre: C'est la fenêtre de votre navigateur. La fenêtre peut être aussi grande que la fenêtre ou plus petite.

Document: C'est la page Web. Il peut être plus grand que la fenêtre ou même plus grand que la fenêtre.

Remarques: Certains sites Web ne sont pas créés pour les mobiles. Par conséquent, la page Web/le document est beaucoup plus grand que la fenêtre d'affichage mobile et vous devez balayer pour voir les parties qui débordent en dehors de l'écran. Sur un bureau, vous pouvez rendre la fenêtre de votre navigateur plus petite ou identique à la fenêtre/moniteur.

21
TwilightSun

document:

document est un objet en JavaScript qui représente le DOM (Document Object Model) de votre page. L'objet document est une représentation de toute la structure de votre page (tous les éléments HTML, etc.), donc ceci:

document.documentElement.clientHeight
document.documentElement.clientWidth

devrait vous donner la largeur de votre <html> élément

fenêtre d'affichage:

en utilisant ceci:

window.innerWidth
window.innerHeight

vous donne les dimensions réelles (physiques) visibles de la fenêtre à l'intérieur de votre navigateur, à l'exclusion des barres de défilement

window.onLoad

window.onload (a.k.a body.onload) est déclenché après que le HTML principal, toutes les CSS, toutes les images et toutes les autres ressources ont été chargés et rendus.

document.onLoad

est appelé lorsque le DOM est prêt, ce qui peut être antérieur au chargement des images et d'autres contenus externes.

8
Chris Halcrow