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

  1. Initial Containing Block (ICB)
  2. Layout Viewport
  3. Visual Viewport
  4. Virtual Keyboard API

Viewport Units

  1. Viewport Units + window.innerHeight
    (Adapted from https://bokand.github.io/demo/urlbarsize.html)
  2. Viewport Units + -webkit-fill-available

Events / All-in-one

Scrollbar Gutter

Safe Inset Areas

  1. With viewport meta tag (width=device-width) but no viewport-fit
  2. With viewport-fit=auto in the viewport meta tag
  3. With viewport-fit=cover in the viewport meta tag
  4. With viewport-fit=contain in the viewport meta tag

Legend