发表新帖
发表新帖

Viewport vs Window Vs Document

前端 未结
关注
3 1865
甜味超标
甜味超标 2021-01-29 23:06

In the below code,

document.documentElement.clientWidth
   1349
document.documentElement.clientHeight
   363
window.innerWidth
   1366
window.innerHeight
   363
相关标签:
3条回答
  • 余生分开走
    2021-01-29 23:34

    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.

    0 讨论(0)
  • 广开言路
    2021-01-29 23:41

    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:

    document.documentElement.clientHeight
document.documentElement.clientWidth

    should be giving you the width of your <html> element

    viewport:

    using this:

    window.innerWidth
window.innerHeight

    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.

    0 讨论(0)
  • 南旧
    2021-01-29 23:51

    I think the best explanation is provided by MDN here that I copied/pasted some important parts down below:

    The document element's Element.clientWidth 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 Window.innerWidth is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.

    The Window.outerWidth is the width of the outside of the browser window including all the window chrome.

    0 讨论(0)
 看不清?
提交回复
热议问题