Viewport ↔ visible portion of Document in window

Visual Viewport

cur visible portion of Viewport

Layout Viewport

Whole Viewport (rep all available to be seen) into which Browser renders Web Page

(rectangular) area through which graphics are being viewed

document.documentElement.clientHeight

document.documentElement.clientWidth

References

1. Layout Viewport ↔ Whole Viewport (rep all available to be seen) into which Browser renders Web Page

2. Visual Viewport ↔ cur visible portion of Viewport

3. <wbr\> ↔ Word Break Opportunity Inline Element to mark optional line break in text for Browser based on Viewport

4. <picture> ↔ Picture Inline Element to load alternative versions of image to match based on Viewport/Browser into Document

5. useOnScreen() ↔ Custom Hook to return boolean to check if node (as ref) is visible on Viewport; Abstracts Intersection Observer API Web API

6. elementInViewport() ↔ utility to check IF HTMLElement inside Viewport

7. Layout Shift ↔ when Element in Viewport changes position - any jitter between frames - indicate visual instability, usually unintentional - measure by CLS

8. LCP ↔ Largest Contentful Paint for loading perf, 👍<2.5s & 4s>💩, ⏱ to load/render first largest element (text/img) on Viewport