Standard Device Presets
UIDesigner Review and Audit support standardized device viewports corresponding to current market hardware:
| Preset Name | Dimensions | Pixel Ratio | Common Devices |
|---|---|---|---|
| Mobile S | 320 × 568 px | 2.0x | iPhone SE (1st gen), compact Android devices |
| Mobile M | 375 × 667 px | 2.0x | iPhone 8, iPhone SE (2nd/3rd gen) |
| Mobile L | 390 × 844 px | 3.0x | iPhone 12 / 13 / 14 / 15, Google Pixel 7 |
| Tablet Portrait | 768 × 1024 px | 2.0x | iPad Mini, iPad 10.2", standard tablets |
| Tablet Landscape | 1024 × 768 px | 2.0x | iPad in landscape mode, compact Chromebooks |
| Desktop Laptop | 1440 × 900 px | 2.0x | MacBook Air & MacBook Pro 13"/14" |
| Desktop Large | 1920 × 1080 px | 1.0x | Full HD 24"/27" desktop monitors |
| UltraWide | 2560 × 1440 px | 1.0x | 2K QHD external displays |
Common CSS Media Query Breakpoints
When authoring responsive stylesheets (e.g., in Tailwind CSS, Bootstrap, or custom CSS), use these standard thresholds:
/* Mobile First Breakpoints */
@media (min-width: 640px) { /* Small devices: tablets */ }
@media (min-width: 768px) { /* Medium devices: iPads portrait */ }
@media (min-width: 1024px) { /* Large devices: laptops & iPad landscape */ }
@media (min-width: 1280px) { /* Extra large devices: desktops */ }
@media (min-width: 1536px) { /* 2K displays and widescreen */ }Custom Viewports
In addition to standard presets, you can configure custom dimensions anytime by typing exact pixel widths into the canvas toolbar or dragging the canvas resize handles.