视口 vs 窗口 vs 文档答案

【问题标题】：Viewport vs Window Vs Document视口 vs 窗口 vs 文档
【发布时间】：2016-02-19 15:03:28
【问题描述】：

在下面的代码中，

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.clientWidth 和document.documentElement.clientHeight 引用视口尺寸。

使用window.innerWidth 和window.innerHeight 引用窗口尺寸。

1) 视口和文档有什么区别？

2) window.onload Vs document.onload 什么时候被调用？

【问题讨论】：

相关：stackoverflow.com/questions/21064101/…

标签： javascript html css dom

【解决方案1】：

当您的页面大于屏幕时，情况就不同了。

视口是您可以看到事物的矩形区域。文档可以比这个大，如果是这样，您会看到滚动条。

关于你的第二个问题：window.onload vs document.onload

这是一个摘要。

视口：这是您的设备屏幕。

窗口：这是您的浏览器窗口。窗口可以和视口一样大，也可以更小。

文档：是网页。它可以比视口大，甚至比窗口大。

注意事项：有些网站不是为手机创建的。因此，网页/文档比移动视口大得多，您必须滑动才能看到溢出屏幕的部分。在桌面上，您可以将浏览器的窗口缩小或与视口/监视器相同。

【讨论】：

如果，Viewport是你可以看到事物的矩形区域，那么，viewport和window有什么区别呢？
@overexchange 窗口可能包含除视口之外的许多额外的东西，例如滚动条、导航栏等。视口只是显示文档内容的区域。通过比较window.innerWidth 和window.outerWidth，您可能会发现差异。
这只是设备的宽度和高度。 screen.width 和 screen.height
@overexchange：不，不一定——浏览器窗口不必最大化。
在我的场景中，1) window.innerHeight=363px 这是css像素高度。 2) window.screen.height=768px 是设备屏幕高度。 window.outerHeight=728px 是什么？因为innerHeight 在放大/缩小时会发生变化。

【解决方案2】：

文档：

document 是 JavaScript 中的一个对象，代表页面的 DOM（文档对象模型）。文档对象是整个页面结构（所有 HTML 元素等）的表示，因此：

document.documentElement.clientHeight
document.documentElement.clientWidth

应该给你<html>元素的宽度

视口：

使用这个：

window.innerWidth
window.innerHeight

为您提供浏览器内窗口的实际可见（物理）尺寸。

window.onLoad

window.onload (a.k.a body.onload) 在主 HTML、所有 CSS、所有图像和所有其他资源都已加载和渲染后被触发。

document.onLoad

在 DOM 准备就绪时调用，可以在加载图像和其他外部内容之前调用。

【讨论】：

window.innerWidth 包括滚动条
视口不等于 window.innerWidth 或高度。为了在 CSS 像素中获取视口，请始终使用 document.documentElement.clientWidth 它在 CSS 像素中等于 100vw。

【解决方案3】：

我认为MDN here 提供了最好的解释，我在下面复制/粘贴了一些重要部分：

文档元素的Element.clientWidth 是文档的内部宽度，以 CSS 像素为单位，包括填充（但不包括边框、边距或垂直滚动条，如果存在）。 这是视口宽度。

Window.innerWidth 是浏览器窗口视口的宽度（以 CSS 像素为单位），包括（如果呈现）垂直滚动条。

Window.outerWidth 是浏览器窗口外部的宽度，包括所有窗口镶边。

【讨论】：