What screen size should I design mobile apps for?

Design at a common logical size such as 393×852 points, then verify at the smallest and largest devices you support. Working at logical points rather than physical pixels means one layout scales across every density.

What is the difference between points, pixels and dp?

Points (iOS) and density-independent pixels (Android) are layout units that stay visually consistent across devices. Physical pixels are what the hardware actually lights up — 2x or 3x as many. Design in points or dp, export assets in pixels.

How much vertical space do safe area insets take?

On a modern iPhone, roughly 59–62 points at the top for the Dynamic Island and 34 points at the bottom for the home indicator. That is close to 100 points of the screen you cannot safely place controls in.

floow.design

Device Size Reference

Screen dimensions, density and safe areas for current handsets — searchable, and exportable as code.

Browse specs freeFree to export device specs as codeNo sign-upNo watermarkRuns in your browser

Platform

Sort by

Device	Logical	Physical px	Scale	Safe top	Safe bottom	Cutout
Galaxy S24 Ultra6.8"	480 × 1023	1440 × 3069	@3x	48	24	Punch hole
Pixel 9 Pro XL6.8"	448 × 998	1344 × 2994	@3x	48	24	Punch hole
iPhone 16 Pro Max6.9"	440 × 956	1320 × 2868	@3x	62	34	Dynamic Island
iPhone 14 Plus6.7"	428 × 926	1284 × 2778	@3x	47	34	Notch
Pixel 96.3"	412 × 923	1082 × 2423	@2.625x	48	24	Punch hole
iPhone 16 Pro6.3"	402 × 874	1206 × 2622	@3x	62	34	Dynamic Island
iPhone 16 / 156.1"	393 × 852	1179 × 2556	@3x	59	34	Dynamic Island
iPhone 13 mini5.4"	375 × 812	1125 × 2436	@3x	50	34	Notch
Galaxy S246.2"	360 × 780	1080 × 2340	@3x	48	24	Punch hole
iPhone SE (3rd gen)4.7"	375 × 667	750 × 1334	@2x	20	0	None

:root {
  --device-galaxys24ultra: 480px 1023px; /* @3x, safe 48/24 */
  --device-pixel9proxl: 448px 998px; /* @3x, safe 48/24 */
  --device-iphone16promax: 440px 956px; /* @3x, safe 62/34 */
  --device-iphone14plus: 428px 926px; /* @3x, safe 47/34 */
  --device-pixel9: 412px 923px; /* @2.625x, safe 48/24 */
  --device-iphone16pro: 402px 874px; /* @3x, safe 62/34 */
  --device-iphone1615: 393px 852px; /* @3x, safe 59/34 */
  --device-iphone13mini: 375px 812px; /* @3x, safe 50/34 */
  --device-galaxys24: 360px 780px; /* @3x, safe 48/24 */
  --device-iphonese3rdgen: 375px 667px; /* @2x, safe 20/0 */
}

Every number you need for a device in one row: physical resolution, logical points or density-independent pixels, the scale factor between them, and the safe area insets.

It also shows your current viewport, so you can see where the browser you are reading this in sits against real hardware.

Points and pixels are not the same thing

You design in logical points; the device renders in physical pixels at 2x or 3x. A 44pt tap target is 88 or 132 real pixels. Confusing the two is why exported assets come out blurry — you export at the point dimension instead of multiplying by the scale factor first.

Design to the extremes, not the average

Pick the smallest screen you support and the largest, and make sure the layout survives both. Everything in between generally takes care of itself. The small end is where content gets clipped and tap targets collide; the large end is where a phone layout stretched to a tablet starts looking empty.

Safe areas change the usable height

The listed height is the full screen, not the space you can safely put controls in. Subtract the top inset for the notch or Dynamic Island and the bottom inset for the home indicator, and the genuinely free area is noticeably shorter than the spec sheet suggests. Backgrounds should still run edge to edge behind both.

How to use the device size reference

Filter by platform to see only the devices you actually support.
Read the logical size for layout work and the physical pixel size for asset exports.
Multiply point dimensions by the scale factor before exporting any image asset.
Note the safe top and bottom insets — that is the height genuinely available for controls.
Export the table to keep the numbers alongside your design specs.

Use it with

Notch & Safe Area Simulator — Preview your screen against real notches and home indicators, and export the inset code for six platforms.
Aspect Ratio Calculator — Work out the missing width or height for any ratio, with the common phone and store ratios one click away.
px to rem Converter — Convert pixels to rem, em, pt, dp and sp, with every density export size and a full token scale.

Frequently asked questions

What screen size should I design mobile apps for?: Design at a common logical size such as 393×852 points, then verify at the smallest and largest devices you support. Working at logical points rather than physical pixels means one layout scales across every density.
What is the difference between points, pixels and dp?: Points (iOS) and density-independent pixels (Android) are layout units that stay visually consistent across devices. Physical pixels are what the hardware actually lights up — 2x or 3x as many. Design in points or dp, export assets in pixels.
How much vertical space do safe area insets take?: On a modern iPhone, roughly 59–62 points at the top for the Dynamic Island and 34 points at the bottom for the home indicator. That is close to 100 points of the screen you cannot safely place controls in.