Viewport vs Window Vs Document

Question

In the below code,

document.documentElement.clientWidth
   1349
document.documentElement.clientHeight
   363
window.innerWidth
   1366
window.innerHeight
   363
         


        

Answer 1

document:

document is an object in JavaScript that represents the DOM (Document Object Model) of your page. The document object is a representation of your entire page structure (all HTML elements etc.), so this:

document.documentElement.clientHeight
document.documentElement.clientWidth

should be giving you the width of your element

viewport:

using this:

window.innerWidth
window.innerHeight

gives you the actual visible (physical) dimensions of the window inside your browser.

window.onLoad

window.onload (a.k.a body.onload) gets fired after the main HTML, all CSS, all images and all other resources have been loaded and rendered.

document.onLoad

is called when the DOM is ready which can be prior to when images and other external content are loaded.