Hook
useVisualViewport
useVisualViewport exposes the part of the page currently visible to the user, which can differ from the layout viewport when browser chrome, zoom, or a software keyboard is present.
Preview
Live visual viewport
Width
Height
Scale
Keyboard hint
Resize or zoom the page to update these measurements.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/use-visual-viewport.jsonUsage
"use client"
import { useVisualViewport } from "@/hooks/use-visual-viewport"
export function ViewportStatus() { const viewport = useVisualViewport()
return ( <output> {Math.round(viewport.width)} × {Math.round(viewport.height)} </output> )}Returns
width / height- The visible viewport dimensions in CSS pixels.
offsetTop / offsetLeft- The visual viewport offset from the layout viewport.
scale- The current pinch-zoom scale.
keyboardHeight- A thresholded layout hint derived from the viewport difference.
supported- Whether the browser exposes the Visual Viewport API.
Behavior notes
- Updates are throttled to one animation frame during viewport resize and scroll events.
- Falls back to window dimensions when the Visual Viewport API is unavailable.
- keyboardHeight is a layout heuristic, not a definitive keyboard-open signal.