viewport | web.dev

there are two kinds of viewport:

In CSS, to position an element relative to the viewport we use position:fixed together with left/top (or right/bottom).

如果 <html> (document.documentElement) 有設定 margin/border，如：

html {
    border: solid blue 10px;
    margin: 10px;
}

// viewport size
const viewport = {
    get width() { return window.innerWidth },
    get height() { return window.innerHeight },
};

Viewport
Window ⟩
- size: (.innerWidth, .innerHeight)
- position: (.scrollX, .scrollY) - relative to document coordinates.