VitalsLog2 tool

Viewport Lab

Live CSS pixel, viewport, zoom, and mobile keyboard diagnostics.

Keyboard: unknown

Primer

CSS px / logical px

Web layout uses CSS pixels. On the web, "logical pixel" usually means the same practical thing: a device-independent layout unit. Physical device pixels are roughly CSS pixels multiplied by DPR.

Device pixel ratio

devicePixelRatio tells how many physical pixels sit under one CSS pixel. A 390 CSS px wide phone at DPR 3 is about 1170 physical pixels wide.

Layout viewport

The viewport CSS layout is built against. This is commonly document.documentElement.clientWidth/Height. It may stay stable when a virtual keyboard appears.

Visual viewport

The visible part of the page after browser chrome, pinch zoom, panning, and virtual keyboard effects. Read it from window.visualViewport when supported.

VirtualKeyboard API

When available, navigator.virtualKeyboard can expose the keyboard bounding rectangle and optionally let the keyboard overlay page content instead of resizing the visual viewport.

Keyboard Targets

Live Metrics

Layout viewport
n/a
n/a
Window inner
n/a
CSS pixels from window.innerWidth/Height
Visual viewport
n/a
n/a
Visual offset
n/a
Offset inside the layout viewport
DPR
n/a
Physical px per CSS px
Screen
n/a
n/a
Orientation
n/a
Screen orientation API when available
Focused target
n/a
Useful when comparing keyboard behavior
Visual shrink
n/a
Layout height minus visual height and visual offset
VirtualKeyboard API
n/a
n/a
VK bounding rect
n/a
CSS px, when the API exposes geometry
CSS env insets
n/a
n/a

Viewport Diagram

layout
visual

Layout viewport: the rectangle CSS layout is usually measured against.

Visual viewport: what is currently visible after zoom, pan, browser UI, and keyboard behavior.

Keyboard rectangle: actual VirtualKeyboard API geometry when available, otherwise a visual-viewport shrink estimate.

Raw Snapshot

{}