视口vs窗口Vs文档 [英] Viewport vs Window Vs Document

问题描述

在下面的代码中，

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

所以，我的桌面屏幕是1366 px宽和768 px高。

我了解到，

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

使用 window.innerWidth 和 window.innerHeight 。

1）是视口和文档之间的区别？

<2> when when window.onload Vs document.onload 被调用？

解决方案

页面更大一个你的屏幕。

视口是可以看到东西的矩形区域。该文档可能会比这更大，如果是这样，您将看到滚动条。

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

下面是一个总结。

视口：这是您的设备屏幕。 这是你的浏览器窗口。该窗口可以与视口一样大或更小。

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

注意：
某些网站不适用于手机。因此，网页/文档比移动视口大得多，您必须轻扫以查看溢出屏幕的部分。
在桌面上，您可以使浏览器的窗口与视口/监视器的大小相同。

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.

I learnt that,

viewport dimensions are referred using document.documentElement.clientWidth and document.documentElement.clientHeight.

window dimensions are referred using window.innerWidth and window.innerHeight.

1) What is the difference between viewport and document?

2) when does window.onload Vs document.onload get invoked?

解决方案

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

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.

这篇关于视口vs窗口Vs文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！