CSS pixels are not hardware pixels
High-density screens use multiple hardware pixels for one CSS pixel. Layout and media queries should follow CSS viewports; image sharpness and canvas rendering can account for DPR separately.
A useful baseline set
Use a compact set that exposes common breakpoint failures.
- 360×780 narrow Android
- 375×667 compact iPhone
- 393×852 modern phone
- 430×932 large phone
- 768×1024 tablet
- 884×1104 foldable or wide tablet
Find the failure between presets
If one preset passes and the next fails, use custom widths to locate the first broken state. The cause is often a minimum-content width, fixed element or unbreakable label—not the device name.
Test orientation and text scaling
Landscape phones have little vertical space, so fixed navigation, consent messages and dialogs can dominate. Repeat critical checks with enlarged text.