🔰viewport
🔰 JS ⟩ browser ⟩ DOM ⟩ types ⟩ Window ⟩ viewport
viewport size
size: (window.innerWidth, window.innerHeight) - includes scrollbars (if present)
position: (.scrollX, .scrollY) - relative to document coordinates.
returns the width/height of the window's layout viewport.
there are two kinds of viewport:
layout viewport - into which the browser draws a web page.
visual viewport - what is currently visible on the user's display device.
如果 <html> (document.documentElement) 有設定 margin/border，如：
html {
border: solid blue 10px;
margin: 10px;
}.borderBox width = viewport width - margin
.paddingBox width = viewport width - margin - border
relative to viewport coordinates
doc.elementFromPoint() - Element at that point.
elem.position() - document coordinates of Element.
coordinates relative to document / viewport / container.
// viewport size
const viewport = {
get width() { return window.innerWidth },
get height() { return window.innerHeight },
};Window ⟩
size: (.innerWidth, .innerHeight)
position: (.scrollX, .scrollY) - relative to document coordinates.
Last updated
Was this helpful?