可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
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?
回答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.
回答2:
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, excluding scrollbars
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.
