Interop 2022 Viewport Investigation Effort Demo Pages
A collection of demos that allow you to debug and test the behavior of certain viewport and viewport-related aspects.
These demos are part of the Viewport Investigation Effort
Individual Viewports and related aspects
- Initial Containing Block (ICB)
- Layout Viewport
- Visual Viewport
- Virtual Keyboard API
Viewport Units
-
Viewport Units +
window.innerHeight
(Adapted from https://bokand.github.io/demo/urlbarsize.html) -
Viewport Units +
-webkit-fill-available
Events / All-in-one
Scrollbar Gutter
-
scrollbar-gutter: stable;
-
scrollbar-gutter: stable both-edges;
Safe Inset Areas
- With viewport meta tag (
width=device-width
) but noviewport-fit
- With
viewport-fit=auto
in the viewport meta tag - With
viewport-fit=cover
in the viewport meta tag - With
viewport-fit=contain
in the viewport meta tag
Legend
- Red dashed line = ICB
- Blue dotted line = Layout Viewport
- Orange slanted line = Visual Viewport