Question

在下面的代码中，

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 什么时候被调用？

Answer 1

当您的网页比屏幕大时，情况会有所不同。

视口是您可以看到事物的矩形区域。文档可能比那个大，你会看到滚动条。

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

以下是摘要。

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

窗口：这是您的浏览器窗口。窗口可以与视口一样大或更小。

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

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

Answer 2

<强>文件：

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

document.documentElement.clientHeight
document.documentElement.clientWidth

应该为您提供<html>元素的宽度

<强>视

使用：

window.innerWidth
window.innerHeight

为您提供浏览器中窗口的实际可见（物理）尺寸，不包括滚动条

<强>的window.onload

在主HTML，所有CSS，所有图像和所有其他资源都已加载和渲染之后，

window.onload（a.k.a body.onload）被触发。

<强> document.onLoad

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

。

Answer 3

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

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

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

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

Viewport vs Window与文档

3 个答案: