Core guide

Viewport sizing

Keep logical coordinates stable as CSS size, letterboxing, and device pixels change.

Live example

See Viewport sizing in action

See a logical frame and centered marker stay stable inside the responsive viewport.

live rendering loading ticks 0

How it works

Choose a fixed-fit or responsive policy to separate logical size from CSS size, letterboxing, device pixel ratio, and physical surface dimensions.

Public types

ViewportSize
FixedViewportOptions
ResponsiveViewportOptions
Game.resize

Minimum viable example

game.resize(calculate_fixed_viewport({
  logical_width: 800, logical_height: 450,
  css_width: container.clientWidth, css_height: container.clientHeight,
  device_pixel_ratio: devicePixelRatio,
}));
const bounds = game.get_viewport();

Scope and limitations

Fixed-fill cropping, integer-only scaling, and automatic DOM observation are deferred.