Viewport vs Window与文档

Question

Viewport vs Window与文档

在下面的代码中,

document.documentElement.clientWidth
   1349
document.documentElement.clientHeight
   363
window.innerWidth
   1366
window.innerHeight
   363
window.screen.height
   768
window.screen.width
   1366

Run Code Online (Sandbox Code Playgroud)

所以,我的桌面屏幕宽1366像素,高768像素.

我了解到,

视口尺寸使用document.documentElement.clientWidth和引用document.documentElement.clientHeight.

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

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

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

Answer 1

Twi*_*Sun 24

当您的页面大于屏幕时,情况会有所不同.

视口是您可以看到事物的矩形区域.文档可能比这大,如果是这样你会看到滚动条.

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

这是一个总结.

视口:这是您的设备屏幕.

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

文件:这是网页.它可以比视口大,甚至比窗口大.

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

这个答案虽然开头正确，但在摘要中却完全错误：视口不是设备屏幕。它是浏览器中显示实际网页的部分。因此，窗口通常比视口大。 (3认同)
如果,*Viewport是您可以看到事物的矩形区域*,那么,视口和窗口之间有什么区别？ (2认同)

Answer 2

Chr*_*row 8

文献:

document是JavaScript中的一个对象,表示页面的DOM(文档对象模型).文档对象表示整个页面结构(所有HTML元素等),因此:

document.documentElement.clientHeight
document.documentElement.clientWidth

Run Code Online (Sandbox Code Playgroud)

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

视:

使用这个:

window.innerWidth
window.innerHeight

Run Code Online (Sandbox Code Playgroud)

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

在window.onload

window.onload(aka body.onload)在主HTML,所有CSS,所有图像和所有其他资源都已加载和呈现后被触发.

document.onLoad

在DOM准备就绪时调用,这可以在加载图像和其他外部内容之前进行.

window.innerWidth包含滚动条 (3认同)

归档时间：	10 年，3 月前
查看次数：	21638 次
最近记录：	8 年，2 月前