CODEWITHSUNDEEP
javascripthtmlcssdom
overexchange
overexchange

Reputation: 1

Viewport vs Window Vs Document

In the below code,

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

So, My desktop screen is 1366 px wide and 768 px height.

I learnt that,

viewport dimensions are referred using document.documentElement.clientWidth and document.documentElement.clientHeight.

window dimensions are referred using window.innerWidth and window.innerHeight.

1) What is the difference between viewport and document?

2) when does window.onload Vs document.onload get invoked?

Upvotes: 43

Views: 40993

Answers (3)

TwilightSun
TwilightSun

Reputation: 2335

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 not meant for mobile usage. 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.

Upvotes: 39

Chris Halcrow
Chris Halcrow

Reputation: 32010

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 <html> 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.

Upvotes: 10

Makan
Makan

Reputation: 719

I think the best explanation is provided by MDN here that I copied/pasted some important parts down below:

The document element's Element.clientWidth is the inner width of a document in CSS pixels, including padding (but not borders, margins, or vertical scrollbars, if present). This is the viewport width.

The Window.innerWidth is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.

The Window.outerWidth is the width of the outside of the browser window including all the window chrome.

Upvotes: 2

Related Questions