blocks|key|1731341|text|当页面大于屏幕时，情况就不同了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1731342|视图是一个矩形区域，在那里你可以看到东西。文档可以大于此，如果是的话，您将看到滚动条。|1731343|至于你的第二个问题：window.onload对document.onload|offset|length|1731344|这是一个总结。|1731345|视图：--这是你的设备屏幕。|style|BOLD|1731346|窗口：--这是您的浏览器窗口。窗口可以和视口一样大，也可以更小。|1731347|文档：，这是网页。它可以比视口大，也可以比窗口大。|1731348|注意:有些网站不是为手机而创建的。因此，网页/文档要比移动视图大得多，您必须滑动才能看到屏幕外溢出的部分。在桌面上，您可以使浏览器的窗口变小或与视口/监视器相同。|1731349|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/588040/window-onload-vs-document-onload^0|0|0|A|T|0|0|0|0|3|0|0|3|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$F|14|G|15|1|16]]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@$F|19|G|1A|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1B|8|@$F|1C|G|1D|L|M]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1E|8|@$F|1F|G|1G|L|M]]|9|@]|A|$]]|$1|R|3|S|5|6|7|1H|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

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: <a href="https://stackoverflow.com/questions/588040/window-onload-vs-document-onload">window.onload vs document.onload</a>

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.

blocks|key|2288513|text|文档：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2288514|文档是JavaScript中的一个对象，它表示页面的DOM+()。document对象是整个页面结构(所有HTML元素等)的表示，因此如下：|2288515|document.documentElement.clientHeight
document.documentElement.clientWidth|code-block|syntax|javascript|2288516|应该为您提供<html>元素的宽度。|CODE|2288517|视图：|2288518|使用此方法：|2288519|window.innerWidth
window.innerHeight|2288520|提供浏览器内窗口的实际可见(物理)尺寸。|2288521|window.onLoad|2288522|window.onload+(a.k.a+body.onload)在主HTML、所有CSS、所有图像和所有其他资源被加载和呈现后被触发。|2288523|document.onLoad|2288524|在DOM准备就绪时调用，这可以在加载图像和其他外部内容之前调用。|2288525|entityMap^0|0|3|0|0|0|6|6|0|0|3|0|0|0|0|0|D|0|0|0|F|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1C|8|@$9|1D|A|1E|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1I|8|@]|D|@]|E|$]]|$1|T|3|U|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|V|3|W|5|6|7|1K|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|1O|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|13|3|14|5|6|7|1S|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|16|$]]

document:

document is an object in JavaScript that represents the DOM (Document Object Model) of your page. The document object is a representation of your entire page structure (all HTML elements etc.), so this:

<pre><code>document.documentElement.clientHeight
document.documentElement.clientWidth
</code></pre>

should be giving you the width of your <code>&lt;html&gt;</code> element

viewport:

using this:

<pre><code>window.innerWidth
window.innerHeight
</code></pre>

gives you the actual visible (physical) dimensions of the window inside your browser.

window.onLoad

window.onload (a.k.a body.onload) gets fired after the main HTML, all CSS, all images and all other resources have been loaded and rendered.

document.onLoad

is called when the DOM is ready which can be prior to when images and other external content are loaded.

blocks|key|1731398|text|我认为MDN在这里提供了最好的解释，我在下面复制/粘贴了一些重要的部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1731399|document元素的Element.clientWidth是以CSS像素为单位的文档的内部宽度，包括填充(如果存在，则不包括边框、边距或垂直滚动条)。这是视口宽度.|style|CODE|BOLD|1731400|Window.innerWidth是浏览器窗口视图端口的宽度(以CSS像素为单位)，如果呈现，则包括垂直滚动条。|1731401|Window.outerWidth是浏览器窗口外部的宽度，包括所有的窗口铬。|1731402|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts^0|3|6|0|0|B|J|24|7|0|0|H|0|0|H|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@$A|Z|B|10|F|G]|$A|11|B|12|F|H]]|9|@]|C|$]]|$1|I|3|J|5|6|7|13|8|@$A|14|B|15|F|G]]|9|@]|C|$]]|$1|K|3|L|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

I think the best explanation is provided by <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts" rel="nofollow noreferrer">MDN here</a> that I copied/pasted some important parts down below:

The document element's <code>Element.clientWidth</code> is the inner width of a document in CSS pixels, including padding (but not borders, margins, or vertical scrollbars, if present). This is the viewport width.

The <code>Window.innerWidth</code> is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.

The <code>Window.outerWidth</code> is the width of the outside of the browser window including all the window chrome.

In the below code,

<pre><code>document.documentElement.clientWidth
 1349
document.documentElement.clientHeight
 363
window.innerWidth
 1366
window.innerHeight
 363
window.screen.height
 768
window.screen.width
 1366
</code></pre>

So, My desktop screen is 1366 px wide and 768 px height.

I learnt that, 

viewport dimensions are referred using <code>document.documentElement.clientWidth</code> and <code>document.documentElement.clientHeight</code>.

window dimensions are referred using <code>window.innerWidth</code> and <code>window.innerHeight</code>.

1) What is the difference between viewport and document?

2) when does <code>window.onload</code> Vs <code>document.onload</code> get invoked?

Viewport vs Window Vs Document

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在以下代码中，document.documentElement.clientWidth   1349document.documentElement.clientHeight   363window.innerWidth   1366window.innerHeight   363window.screen.heigh...

问视口vs窗口Vs文档
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视口vs窗口Vs文档EN