Mobile UI Constraint Layout Engine

Device Screen

Preset Custom

Screen width 390px

Screen height 780px

UI Elements (tap to select)

Selected Element Constraint

Anchor —

Layout Result

Breakpoint

Compact

Clipped elements

Aspect ratio

1.00

Density (dp scale)

1.00×

How it works

Real mobile UI frameworks (Android ConstraintLayout, iOS Auto Layout, CSS Flexbox) don't hard-code pixel positions — they describe each element's size and position as a constraint relative to its parent, then a layout pass resolves every constraint into final coordinates whenever the container size changes (rotation, split-screen, a different device).

Fixed:   w_px = w_pt · density        (same physical size on every screen)
Percent: w_px = pct · screenWidth     (scales with the container)
Aspect:  w_px = screenWidth − margins
         h_px = w_px / aspectRatio    (locked proportions, e.g. a video thumbnail)

Breakpoint: screenWidth < 600dp → Compact
            600 ≤ screenWidth < 840  → Medium
            screenWidth ≥ 840        → Expanded

This sim resolves four elements — a status bar, a hero image, a text block and a bottom nav bar — against a live constraint solver each frame. Drag the width/height sliders or pick a device preset to re-run the layout pass; an element is flagged clipped when its resolved box would overflow the screen bounds, exactly the bug a real developer catches by testing across device sizes. Select an element and change its anchor rule to see how the same content behaves differently under fixed vs. percentage vs. aspect-locked constraints.

Real-world relevance: this is the exact resize/reflow problem every mobile app must solve to support hundreds of physical screen sizes, foldables, and orientation changes from one layout description.

Status bar Hero image Text block Bottom nav

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.