Widthsphone

Devices with a 402px wide viewport

402px4 devices

4 devices give web pages a 402 CSS pixel wide viewport in portrait, with heights from 874 to 874px. If your layout fits 402px, it fits all of them.

DeviceCSS viewportDPRPhysical pixelsYear
iPhone 18 Pro402×87431206×26222026
iPhone 17 Pro402×87431206×26222025
iPhone 17402×87431206×26222025
iPhone 16 Pro402×87431206×26222024

Check your site at 402px

Paste your address (or localhost:3000). doesitfit shows it on real screen sizes at once and tells you, bluntly, where it spills.

Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.

Designing for 402px

Breakpoints

Tailwind: base styles only (below sm, 640px). Bootstrap: xs.

Room for content

370px with 16px side padding, 354px with 24px. Anything fixed wider than 402px makes the page scroll sideways (fix it).

Sharp images

At DPR 3, a full-width image needs 1206px of real pixels.

Every height at this width

402 × 874

Nearby widths

Questions people ask

Which phones have a 402px wide viewport?

iPhone 18 Pro, iPhone 17 Pro, iPhone 17, iPhone 16 Pro.

Is 402px the screen resolution?

No. 402px is the width in CSS pixels, what web pages get. The screens have 3× as many physical pixels across (the device pixel ratio).

Which breakpoint applies at 402px?

Tailwind CSS: base styles only (below sm, 640px). Bootstrap: xs. Media queries use this CSS width, not the screen resolution.

Guides that help