Devices with a 414px wide viewport

414px1 device

1 device gives web pages a 414 CSS pixel wide viewport in portrait, with heights from 896 to 896px. If your layout fits 414px, it fits all of them. Sizes this wide are about 13.7% of worldwide traffic in StatCounter’s top lists (Aug 2026).

Device	CSS viewport	DPR	Physical pixels	Year
iPhone 11 / XR	414×896	2	828×1792	2019

Check your site at 414px

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 414px

Breakpoints

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

Room for content

382px with 16px side padding, 366px with 24px. Anything fixed wider than 414px makes the page scroll sideways (fix it).

Sharp images

At DPR 2, a full-width image needs 828px of real pixels.

Every height at this width

414 × 896

Nearby widths

Questions people ask

Which phones have a 414px wide viewport?

iPhone 11 / XR.

Is 414px the screen resolution?

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

Which breakpoint applies at 414px?

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

How common is a 414px wide screen?

Screen sizes 414px wide make up about 13.7% of the traffic in StatCounter’s top lists for Aug 2026 (414×896: 13.7%).