Viewport vs Window Vs Document

Question

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?

Related: http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively — aug, Nov 18 '15 at 02:03

score 36 · Accepted Answer · edited Jun 11 '23 at 15:12

36

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.

edited Jun 11 '23 at 15:12

Omar Trkzi

130
1
2
13

answered Nov 18 '15 at 02:09

TwilightSun

2,275
2
18
27

3

If, *Viewport is the rectangle area where things are visible to you*, then, what is the difference between viewport and window? – overexchange Nov 18 '15 at 02:13
1

@overexchange window may contain many extra things other than the viewport, such as the scrollbars, navigation bars, etc. Viewport is just the area displaying document contents. You may see the difference by comparing `window.innerWidth` and `window.outerWidth`. – TwilightSun Nov 18 '15 at 02:16
which is nothing but device width and height. `screen.width` and `screen.height` – overexchange Nov 18 '15 at 02:20
1

@overexchange: No, not necessarily – the browser window doesn’t have to be maximized. – CBroe Nov 18 '15 at 02:29
In my scenario, 1) `window.innerHeight=363px` which is css pixel height. 2) `window.screen.height=768px` is device screen height. What is `window.outerHeight=728px`? Because `innerHeight` is changing on zoom-in/zoom-out. – overexchange Nov 18 '15 at 02:38
@overexchange when you zoom, your document and the content inside will not change dimension values (if not considering percentage), it's the viewport coordinate thats changing. Your viewport will be bigger in total size (logical pixels) but smaller in unit size (physical pixels per logical pixel) when you zoom out (you can see more things), and the opposite when you zoom in. The outer dimension of your window will be very likely to be the size of your browser window under os screen coordinates. In summery, the sizes are under different coordinate systems. – TwilightSun Nov 18 '15 at 02:50
Terminology: `window.innerHeight` is viewport(css pixel height). `window.screen.height` is device pixel height. How do I term `window.outerHeight`? – overexchange Nov 18 '15 at 03:05
@overexchange `window.outerHeight` is browser window device pixel height. It's different with `window.screen.height` when your browser is not fullscreen. `window.screen.height` is the whole height of your monitor screen while `window.screen.height` is only the height used by your browser. When maximized `window.screen.height - window.outerHeight` should equal to your task bar size if your OS is Windows. – TwilightSun Nov 18 '15 at 03:23
One supple: How are `window.innerHeight` & `window.outerHeight` & `window.screen.height` defined in mobile device(phone) world? Any resource to learn? – overexchange Nov 18 '15 at 03:34
@overexchange here's an article you might be interested in: http://tripleodeon.com/2011/12/first-understand-your-screen/ – TwilightSun Nov 18 '15 at 03:40
What are we doing, when we say, `` or ``? – overexchange Nov 18 '15 at 03:58
@overexchange This meta tag is used to specify the initial properties of the viewport when displayed on mobile browsers. You may set the viewport to a specific width that's best to display your contents. With `device-width` your viewport will have the width of the mobile device screen. Without this meta tag, your browser may try to set the viewport width to a large value so your page layout can be the same as how it is under a desktop browser (this will usually cause your contents to be very small). – TwilightSun Nov 18 '15 at 04:19
Is it true that viewport is device screen? DOM Objects are resized when I set vw or vh to them and resize the browser window – Eric Feb 12 '18 at 05:31
This article (https://github.com/GoogleChrome/puppeteer/issues/1183 - see the image on post 1) and wikipedia (https://en.wikipedia.org/wiki/Viewport) shows that the viewport is the visible portion and not the device screen. Can you clarify this part? – Babbzzz Oct 10 '18 at 09:53
3

This answer, while beginning correctly, gets it completely wrong in the summary: The Viewport is NOT the device screen. Its the part of the browser that shows the actual web page. As such, the window is usually bigger than the viewport. – Nicolai Ehemann Mar 25 '20 at 07:48
This answer is wrong. Viewport is not the device screen, and the `innerHeight`/`innerWidth` dimensions do not include the browser "chrome" like tab bar and bookmarks bar. `window` dimensions include just the part of the browser window that display the document, including scrollbars, if any. Viewport is the part of the window that displays the document, minus scrollbars, if any. – tvanc Jun 02 '22 at 16:52

Chris Halcrow · Answer 2 · 2020-05-18T00:02:24.757

10

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.

edited May 18 '20 at 00:02

answered Nov 18 '15 at 02:12

Chris Halcrow

28,994
18
176
206

3

window.innerWidth is INCLUDING the scroll bars – Benn Jul 16 '17 at 11:30
1

Viewport is not equal to window.innerWidth or height. For getting viewport in CSS pixel always use document.documentElement.clientWidth it is equal to 100vw in CSS pixel. – Makan Mar 27 '20 at 12:35

score 2 · Answer 3 · answered Mar 27 '20 at 12:59

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.

Viewport vs Window Vs Document

3 Answers3

Linked