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

Things are different when your page is bigger than your screen.

Viewport is the rectangle area where things are visible to you. The document can be larger than that and you'll see scrollbars if so.

As for your second question: window.onload vs document.onload

Here is a summary.

Viewport: It is your device screen.

Window: It is your browser window. The window can be as big as viewport or smaller.

Document: It is the webpage. It can be bigger than viewport or even bigger than window.

Notes: Some websites are for not created for mobiles. Hence the webpage/document is much bigger than the mobile viewport and you have to swipe to see the parts that spill outside the screen. On a desktop, you can make the window of your browser smaller or same as the viewport/monitor.