Device Screen Sizes

Three numbers describe every screen and two of them get confused constantly. Points — also called CSS pixels or density-independent pixels — are the coordinate space you lay out in. Device pixels are what the hardware actually lights up. The scale factor is the ratio between them, and it decides what @2× and @3× mean and nothing else.

An iPhone 15 is 393 points wide and 1179 device pixels wide, because it draws three device pixels for every point. Design at 393. Export raster assets at 3×. Anyone building a phone screen on a 1179-pixel canvas has designed it at triple size, and every type size on it is a third of what they intend — which is the single most common version of this mistake.

Pixel density in ppi is a third thing again, and it is about the panel rather than the coordinate space. It comes from the device pixels and the physical diagonal, so two phones can share a points size and a scale factor and still differ in density if their screens are different physical sizes. It matters for print-like fidelity and for nothing else in layout.

Laptop figures need one extra caution. The points size of a Mac laptop is its default scaled resolution rather than its native panel — a 14-inch MacBook Pro reports 1512 × 982 points while its panel is 3024 × 1964. Windows machines apply a display scaling percentage that users change freely, so the most common Windows laptop viewport is a 1920 × 1080 panel at 125% scaling, which is 1536 × 864 points.

Devices are released continuously, and a static list cannot know about anything launched after it was compiled. That is a genuine limitation rather than a caveat to skim: the table shows the date it was last reviewed precisely so you can judge how much to trust it, and anything newer than that date is simply absent with no indication that it should be there.

The deeper point is that designing to a device list is the wrong instinct anyway. Specific dimensions are useful for setting up an artboard and checking a known target, but a layout built to a list of viewports breaks on the next device that ships. Build to ranges, test at the extremes, and treat these numbers as landmarks rather than as the terrain.

The two figures worth committing to memory are the narrow end and the common middle: around 360 to 393 points wide covers the great majority of phones, and 1536 points is the most common laptop viewport. A design that works at both of those and stretches sensibly between will survive hardware you have never heard of.