Menu
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?
938
A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.
Viewport always remains same in terms of screen size as screen size remains same but resolution to display it, is changeable for example old 15" monitors can display different resolutions from 800 x 600, 1024 x 768 and 1280 x 1023 so it depends on focus ability of a screen.
When JavaScript is executed inside the browser, the window object is the JavaScript Global object. The document object is a property of the window object. The window object represents the browser window. The document object represents the HTML document loaded in that window.
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.
194
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.
34
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
