Screen sizesphone

414 × 896 viewport: which devices use it?

414 × 896CSS px · 19.5:9

414 × 896 is the CSS viewport of 1 device in our research, including the iPhone 11 / XR. It’s the #1 most common phone screen size worldwide (13.7%, Aug 2026). Turned sideways it becomes 896 × 414.

DeviceCSS viewportDPRPhysical pixelsYear
iPhone 11 / XR414×8962828×17922019

Check your site at 414 × 896

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 wide

Breakpoints

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

Room for content

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

All devices 414px wide, whatever their height.

Nearby sizes

Questions people ask

Which phone has a 414 × 896 viewport?

iPhone 11 / XR.

Is 414 × 896 the screen resolution?

No, it’s the viewport in CSS pixels. The physical screen has more pixels: the iPhone 11 / XR is 828 × 1792 (DPR 2).

Which breakpoint does a 414px wide screen use?

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

How common is 414 × 896?

13.7% of mobile screens worldwide (#1) in Aug 2026, according to StatCounter.

Guides that help