visualviewport

Read the visual viewport's size, offset, and scale, and listen for its resize/scroll events, via the Visual Viewport API.

Import: @rtorcato/browser-common/visualviewport

📖 MDN: VisualViewport · 📊 caniuse: visualviewport

Browser support

API	Chrome	Edge	Firefox	Safari	iOS Safari	Baseline
VisualViewport	✅ 61+	✅ 79+	✅ 91+	✅ 13+	✅ 13+	Widely available

✅ supported · ◐ partial · ❌ not supported · [n] see note. Generated from MDN browser-compat-data and web-features. caniuse: VisualViewport

Example

import {
  isVisualViewportAvailable,
  getVisualViewportInfo,
  onVisualViewportChange,
} from '@rtorcato/browser-common/visualviewport'

if (isVisualViewportAvailable()) {
  const info = getVisualViewportInfo()
  console.log(info?.scale)

  const off = onVisualViewportChange(() => updateLayout())
  // later:
  off()
}

Exports

• isVisualViewportAvailable() — feature check
• getVisualViewportInfo() — current { offsetLeft, offsetTop, width, height, scale }, or null
• onVisualViewportChange(callback) — subscribe to resize and scroll; returns an unsubscribe function

See the API reference for full signatures.