Mobile UI Sizes

Features

• Logical resolutions (pt), scale factor and physical pixels for common iPhones and iPads
• Common Android dp widths, with the caveat that there is no single value
• Safe areas: 59pt with the Dynamic Island, 47pt with a notch, 20pt without, 34pt for the home indicator
• Android status bar 24dp and navigation bar 48dp
• Minimum touch targets: Apple 44×44pt, Material 48×48dp, WCAG AA 24×24px, WCAG AAA 44×44px
• The 11-step iOS type scale, from Large Title to Caption 2
• The 15-step Material 3 type scale, from Display to Label
• An 8pt / 8dp spacing base with common steps, plus Material 3’s six corner-radius levels
• The five Material 3 window size classes, which serve as breakpoints
• Search by device name, by number (390, 44) or by category
• All seven categories sit in a searchable dropdown — pick one to browse it
• Empty input lists the full reference, browsable as a cheat sheet

How to use

1. Enter a device name, such as iPhone 14 Pro, for its logical resolution and scale factor
2. Or enter a number, such as 390 or 44, to find out what it is
3. To browse, enter a category such as "touch target", or pick one from the dropdown
4. Leave the box empty to list everything, grouped into the seven categories

FAQ

What width should I start a design at?

On iOS, 375pt and 390pt are the two common starting points. 375 is the older baseline (iPhone SE and the 8 generation); 390 is the common width from the iPhone 12 onwards and divides evenly for halves and thirds. There is no single right answer, but do not build to one width alone — the same design has to hold up across roughly 375 to 440, so build it with flexible layout, percentages and adaptive constraints rather than producing a version per width. On Android the same reasoning applies, with widths clustering between 360 and 412 dp.

Will the device data go out of date?

Yes, and it certainly will. Every release can introduce a new logical resolution, and this tool records when it was verified (stated on the page). So use it for existing devices, and for a model announced last week, defer to the vendor. That is also why it covers common devices rather than everything — a table claiming to list every model is precisely the kind that quietly goes stale in one spot.

Which of the four touch target numbers should I use?

It depends on your platform and your compliance target. For an iOS app, follow Apple’s 44×44pt; for an Android app, follow Material’s 48×48dp — both are the official requirement on their platform, so just do that. On the web, note that WCAG is looser: AA asks only for 24×24px, and it permits a spacing-based alternative; AAA’s 44×44px matches Apple’s number. In practice, build to 44px: it satisfies all three, and the 4pt difference is imperceptible on a fingertip while removing a whole class of compliance problems.

Why does Android use dp rather than pt?

They are the same idea under two names — a logical unit independent of pixel density (iOS calls it a point, Android a density-independent pixel). Both are converted by the system according to screen density, so a 360dp Android phone and a 375pt iPhone are physically similar in width. The CSS equivalent is the device-independent CSS pixel. The differing names make them look like two concepts, but the conversion logic is identical.

Why are there no specific Android devices?

Because there are too many, with too varied resolutions, and listing them would mislead: any device table omits a large share of devices in use, and the omitted ones may well be the ones your users hold. So the Android side gives the range (360–412 dp) and two typical values, plus the advice to build flexibly — which helps far more than a model list. For a specific device, check the manufacturer’s official spec page.