Apple
Viewport size (375x812) is the CSS pixel dimensions used in responsive web design and media queries. This is what developers see in browser developer tools.
Device resolution (1125x2436) is the actual number of physical pixels on the screen.
Pixel ratio (3x) means 3physical pixels = 1 CSS pixel. Higher ratios provide sharper displays.
@media (max-width: 375px)Portrait width breakpoint@media (max-width: 812px)Portrait height breakpoint@media (min-width: 376px)Above this device widthPhysical pixels per inch (higher = sharper)
Effective PPI for web development
| Device | Viewport | Resolution | Screen Size | Pixel Ratio |
|---|---|---|---|---|
| iPhone 11 Pro | 375x812 | 1125x2436 | 5.8" | 3x |
| iPhone X | 375x812 | 1125x2436 | 5.8" | 3x |