Viewport Info

import { viewportInfo } from "mobx-web-api";

Allows tracking visual viewport dimensions and scale.

What's inside

Uses Visual Viewport API under the hood.

Usage

import { viewportInfo } from "mobx-web-api";
import { reaction } from "mobx";

reaction(
  () => viewportInfo.height,
  (height) => {
    console.log(`visual viewport height: ${height}`);
  }
);

Properties

isSupported

true when window.visualViewport exists.

MDN Reference

width / height

Visual viewport size.

• MDN width
• MDN height

offsetLeft / offsetTop

Offset of visual viewport relative to layout viewport.

• MDN offsetLeft
• MDN offsetTop

pageLeft / pageTop

Coordinates of visual viewport relative to initial containing block.

• MDN pageLeft
• MDN pageTop

scale

Current pinch-zoom scale factor.

MDN Reference

isKeyboardLikeOverlay

Heuristic flag that becomes true when visual viewport is much smaller than layout viewport.

Notes

• If VisualViewport API is unavailable, falls back to window.innerWidth/innerHeight.
• Keyboard overlay detection is heuristic and may vary by browser.