Devices with a 448px wide viewport
448px3 devices
3 devices give web pages a 448 CSS pixel wide viewport in portrait, with heights from 998 to 998px. If your layout fits 448px, it fits all of them.
| Device | CSS viewport | DPR | Physical pixels | Year |
|---|---|---|---|---|
| Google Pixel 10 Pro XL | 448×998 | 2.25 | 1344×2992 | 2025 |
| Google Pixel 9 Pro XL | 448×998 | 2.25 | 1344×2992 | 2024 |
| Google Pixel 8 Pro | 448×998 | 2.25 | 1344×2992 | 2023 |
Check your site at 448px
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 448px
Breakpoints
Tailwind: base styles only (below sm, 640px). Bootstrap: xs.
Room for content
416px with 16px side padding, 400px with 24px. Anything fixed wider than 448px makes the page scroll sideways (fix it).
Sharp images
At DPR 2.25, a full-width image needs 1008px of real pixels.
Every height at this width
Nearby widths
Questions people ask
Which phones have a 448px wide viewport?
Google Pixel 10 Pro XL, Google Pixel 9 Pro XL, Google Pixel 8 Pro.
Is 448px the screen resolution?
No. 448px is the width in CSS pixels, what web pages get. The screens have 2.25× as many physical pixels across (the device pixel ratio).
Which breakpoint applies at 448px?
Tailwind CSS: base styles only (below sm, 640px). Bootstrap: xs. Media queries use this CSS width, not the screen resolution.
Guides that help
- Responsive breakpoints in 2026 — the widths that matterWhere 123 real phones, tablets, laptops and monitors land in CSS pixels, which responsive breakpoints actually matter in 2026, and which screens to test.Guides · 8 min read
- How to fix horizontal scrolling on mobile (12 causes)Page wobbles sideways on phones? The 12 usual causes of horizontal scrolling on mobile, a fix for each, and a console snippet that finds the culprit fast.Fixes · 9 min read
- Text touching the screen edge? Mobile padding that worksText squashed against the edge of a phone screen looks broken. How much mobile padding to use (16–24px), CSS and Tailwind patterns that work, and a fix prompt.Fixes · 7 min read