Javascript 视口 vs 窗口 vs 文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33770549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Viewport vs Window Vs Document
提问by overexchange
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.
所以，我的桌面屏幕宽 1366 像素，高 768 像素。
I learnt that,
我了解到，
viewport dimensions are referred using document.documentElement.clientWidthand document.documentElement.clientHeight.
使用document.documentElement.clientWidth和引用视口尺寸document.documentElement.clientHeight。
window dimensions are referred using window.innerWidthand window.innerHeight.
使用window.innerWidth和引用窗口尺寸window.innerHeight。
1) What is the difference between viewport and document?
1）视口和文档有什么区别？
2) when does window.onloadVs document.onloadget invoked?
2) window.onloadVsdocument.onload什么时候被调用？
采纳答案by TwilightSun
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
至于你的第二个问题：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.
注意：有些网站不是为手机创建的。因此网页/文档比移动视口大得多，您必须滑动才能看到溢出屏幕的部分。在桌面上，您可以使浏览器的窗口更小或与视口/监视器相同。
回答by Chris Halcrow
document:
文档：
documentis 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是 JavaScript 中的一个对象，表示页面的 DOM（文档对象模型）。文档对象是整个页面结构（所有 HTML 元素等）的表示，因此：
document.documentElement.clientHeight
document.documentElement.clientWidth
should be giving you the width of your <html>element
应该给你<html>元素的宽度
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.
window.onload（又名 body.onload）在主 HTML、所有 CSS、所有图像和所有其他资源加载和呈现后被触发。
document.onLoad
文件加载
is called when the DOM is ready which can be prior to when images and other external content are loaded.
当 DOM 准备好时调用，可以在加载图像和其他外部内容之前调用。
回答by Makan
I think the best explanation is provided by MDN herethat I copied/pasted some important parts down below:
我认为MDN 在这里提供了最好的解释，我在下面复制/粘贴了一些重要部分：
The document element's Element.clientWidthis 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.
文档元素Element.clientWidth是以 CSS 像素为单位的文档内部宽度，包括填充（但不包括边框、边距或垂直滚动条，如果存在）。这是视口宽度。
The Window.innerWidthis the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
的Window.innerWidth是宽度，以CSS像素，浏览器窗口视口包括，如果渲染，垂直滚动条。
The Window.outerWidthis the width of the outside of the browser window including all the window chrome.
的Window.outerWidth是在浏览器窗口包括所有的窗口镶边的外侧的宽度。
