提问人：overexchange 提问时间：11/18/2015 最后编辑：overexchange 更新时间：6/11/2023 访问量：37957
视口与窗口与文档
Viewport vs Window Vs Document
问：
在下面的代码中，
document.documentElement.clientWidth
1349
document.documentElement.clientHeight
363
window.innerWidth
1366
window.innerHeight
363
window.screen.height
768
window.screen.width
1366
因此，我的桌面屏幕宽 1366 像素，高 768 像素。
我了解到，
视口尺寸使用 和 引用。document.documentElement.clientWidthdocument.documentElement.clientHeight
窗口尺寸使用 和 引用。window.innerWidthwindow.innerHeight
1） 视口和文档有什么区别？
2） window.onload 与 document.onload 何时被调用？
答：
37赞
TwilightSun
11/18/2015
#1
当您的页面比屏幕大时，情况就不同了。
视口是您可以看到事物的矩形区域。文档可以大于此值，如果是这样，您将看到滚动条。
至于你的第二个问题：window.onload vs document.onload
这是一个摘要。
视窗：这是您的设备屏幕。
窗：它是您的浏览器窗口。窗口可以与视口一样大，也可以更小。
公文：它是网页。它可以比视口大，甚至比窗口大。
笔记： 有些网站不适合移动使用。因此，网页/文档比移动视口大得多，您必须滑动才能看到溢出屏幕的部分。 在桌面上，您可以使浏览器的窗口更小或与视口/监视器相同。
评论
3赞
overexchange
11/18/2015
如果视口是事物可见的矩形区域，那么，视口和窗口有什么区别？
1赞
TwilightSun
11/18/2015
@overexchange窗口可能包含视口以外的许多额外内容，例如滚动条、导航栏等。视口只是显示文档内容的区域。您可以通过比较 和 来查看差异。window.innerWidthwindow.outerWidth
0赞
overexchange
11/18/2015
这只不过是设备的宽度和高度。 和screen.widthscreen.height
1赞
CBroe
11/18/2015
@overexchange：不，不一定 - 浏览器窗口不必最大化。
3赞
Nicolai Ehemann
3/25/2020
这个答案虽然开头正确，但在摘要中却完全错误：视口不是设备屏幕。它是浏览器中显示实际网页的部分。因此，窗口通常比视口大。
10赞
Chris Halcrow
11/18/2015
#2
公文：
document 是 JavaScript 中的一个对象，表示页面的 DOM（文档对象模型）。文档对象是整个页面结构（所有 HTML 元素等）的表示形式，因此：
document.documentElement.clientHeight
document.documentElement.clientWidth
应该给你元素的宽度<html>
视窗：
使用这个：
window.innerWidth
window.innerHeight
为您提供浏览器内窗口的实际可见（物理）尺寸。
window.on加载
window.onload（又名body.onload）在主HTML、所有CSS、所有图像和所有其他资源加载和渲染后被触发。
document.on加载
在 DOM 准备就绪时调用，这可能在加载图像和其他外部内容之前。
评论
3赞
Benn
7/16/2017
window.innerWidth 包括滚动条
1赞
Makan
3/27/2020
视口不等于 window.innerWidth 或 height。要获取 CSS 像素中的视口，请始终使用 document.documentElement.clientWidth，它在 CSS 像素中等于 100vw。
2赞
Makan
3/27/2020
#3
我认为最好的解释是 MDN 在这里提供的，我在下面复制/粘贴了一些重要的部分：
document 元素是文档的内部宽度（以 CSS 像素为单位），包括填充（但不包括边框、边距或垂直滚动条（如果存在）。这是视口宽度。Element.clientWidth
是浏览器窗口视口的宽度（以 CSS 像素为单位），如果呈现，则包括垂直滚动条。Window.innerWidth
是浏览器窗口外部的宽度，包括所有窗口镶边。Window.outerWidth
上一个：在iPAD上播放多个视频
评论