Overview
Modern web applications must perform flawlessly across hundreds of screen resolutions and orientations. UIDesigner Review allows you to inspect layouts across standard device breakpoints or fluid custom dimensions without manually resizing your browser window or opening DevTools.
Viewport Presets
The top toolbar offers one-click access to standard industry viewports:
| Device Category | Preset Dimensions | Common Target Hardware |
|---|---|---|
| Mobile S | 320 × 568 px | iPhone SE (1st gen), compact Android devices |
| Mobile M | 375 × 667 px | iPhone 8, SE (2nd/3rd gen) |
| Mobile L | 390 × 844 px | iPhone 12/13/14/15, Google Pixel 7 |
| Tablet Portrait | 768 × 1024 px | iPad Mini, iPad 10.2", standard tablets |
| Tablet Landscape | 1024 × 768 px | iPad landscape mode, small netbooks |
| Desktop Laptop | 1440 × 900 px | MacBook Air & Pro 13/14" default desktop |
| Desktop Large | 1920 × 1080 px | Full HD external monitors and iMacs |
Orientation Toggling
Click the Rotate Viewport icon next to any device frame to immediately flip between Portrait and Landscape modes. Layout recalculations and media queries re-render instantaneously.
Fluid Resizing Handles
Need to test boundary breakpoints like 640px (Tailwind sm), 768px (md), or 1024px (lg)?
- Hover over the right or bottom edges of the active canvas frame.
- Click and drag the resize handle horizontally or vertically.
- An overlay indicator displays the exact live width and height in CSS pixels.
Zoom & Pan Canvas Controls
Navigate expansive layouts effortlessly with standard canvas gestures:
- Pan: Hold the
Spacebarand drag with your mouse, or use a two-finger trackpad drag. - Zoom: Pinch to zoom on trackpads, or use
Cmd + Plus/Cmd + Minus. - Fit to Screen: Press
Shift + 1or click the zoom dropdown and choose Fit to Screen to automatically scale the active frame to your organization view.