Screen sizesphone

402 × 874 viewport: which devices use it?

402 × 874CSS px · 19.6:9

402 × 874 is the CSS viewport of 4 devices in our research, including the iPhone 18 Pro, iPhone 17 Pro, iPhone 17. Turned sideways it becomes 874 × 402.

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 402 × 874

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 wide

Breakpoints

Tailwind: base styles only (below sm, 640px). Bootstrap: xs. Sideways (874px): Tailwind md (sm: md: styles apply).

Room for content

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

All devices 402px wide, whatever their height.

Nearby sizes

Questions people ask

Which phone have a 402 × 874 viewport?

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

Is 402 × 874 the screen resolution?

No, it’s the viewport in CSS pixels. The physical screen has more pixels: the iPhone 18 Pro is 1206 × 2622 (DPR 3); the iPhone 17 Pro is 1206 × 2622 (DPR 3).

Which breakpoint does a 402px wide screen use?

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

Guides that help