iPhone Duo — outer screen viewport size
382 × 678CSS px · 3× DPR · 1398×2034 physical
The iPhone Duo — outer screen gives web pages a 382 × 678 CSS pixel viewport in portrait. That’s the width your layout and media queries actually see, not the 1398 × 2034 physical pixels of the screen: with a device pixel ratio of 3, every CSS pixel is 3 × 3 real pixels.
Heads-up: the screen itself is 466 × 678, but iOS keeps an 84px system strip down the right edge (camera, clock and Safari’s buttons) that web pages never draw into. So websites get 382px, narrower than any current iPhone. More on the iPhone Duo.
See your site on an iPhone Duo — outer screen
Paste your address (or localhost:3000). doesitfit shows it at exactly 382 × 678, with Safari (iPhone Duo)’s bars if you want them, and tells you if anything spills.
Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.
What a web page actually sees
The full viewport is 382 × 678, but the browser’s own bars take some of it. In Safari (iPhone Duo) a page gets about 382 × 597 on first load (Safari’s buttons sit in the side strip and the address pill floats at the bottom). That’s your real “above the fold”. Use 100dvh instead of 100vh for full-height sections, or they’ll hide behind the toolbar (why).
| Setting | Width | Height |
|---|---|---|
| Full viewport (portrait) | 382px | 678px |
| Visible on first load (Safari (iPhone Duo)) | 382px | 597px |
| Landscape (full) | 678px | 382px |
What it means for your CSS
Breakpoints
At 382px: Tailwind uses base styles only (below sm, 640px); Bootstrap uses xs. In landscape (678px): Tailwind uses sm (sm: styles apply), Bootstrap sm.
Content width
With 16px of padding on each side your text column is 350px; with 24px it’s 334px. Text closer than 8px to the edge looks cramped (more).
Sharp images
A full-width image needs about 1146px of real pixels (382 × 3).
<img src="hero-1146.jpg" srcset="hero-800.jpg 800w, hero-1146.jpg 1146w" sizes="100vw" alt="…">
Styles for this width
Content-first breakpoints beat device lists, but if something breaks at this width:
@media (max-width: 382px) {
/* screens 382px wide and narrower */
}How common is 466 × 678?
466 × 678 isn’t in StatCounter’s top lists for Aug 2026 on its own, but nearby sizes behave the same way. See the most common screen sizes.
Close in size:
Compare:
Questions people ask
What is the viewport size of the iPhone Duo — outer screen?
382 × 678 CSS pixels in portrait (678 × 382 in landscape), with a device pixel ratio of 3. The screen itself is 1398 × 2034 physical pixels.
How much of the iPhone Duo — outer screen screen does a web page get in Safari?
About 382 × 597 on first load: the Safari’s buttons sit in the side strip and the address pill floats at the bottom. Design your first screen for that height, not the full 678px.
Which CSS breakpoint does the iPhone Duo — outer screen fall into?
At 382px wide, Tailwind CSS uses base styles only (below sm, 640px) and Bootstrap uses its xs tier. In landscape (678px) Tailwind uses sm (sm: styles apply).
How wide should images be for the iPhone Duo — outer screen?
A full-width image needs about 1146px of real pixels (382 CSS px × DPR 3) to look sharp. Use srcset so smaller screens don’t download it.
How can I test my website on an iPhone Duo — outer screen without one?
Open doesitfit.lol, paste your address (localhost works too) and pick the iPhone Duo — outer screen. It shows your site at exactly 382 × 678 CSS pixels and flags anything that spills past the edge.
Guides that help
- iPhone Duo for web developers: viewport sizes and SafariOn the iPhone Duo's outer screen, web pages get 382px, not 466. Unfolded it's 951 × 669 landscape. Simulator-measured sizes, Safari's layout and what to test.Devices · 6 min read
- How much of the screen iPhone users actually see in SafariThe status bar and Safari take 156px of an iPhone 17 Pro's 874px screen. Visible heights for every current iPhone, and what it means for 100vh and dvh.Devices · 7 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
About these numbers
Confidence: Good: from official specs and reports. Websites get 382 px: an 84 px system strip on the right holds the camera, clock and Safari buttons. iPhone Duo: the outer screen is 466 × 678, but iOS 27 reserves an 84 pt strip on its right edge for the camera, clock and Safari’s buttons, so web pages lay out at 382 px wide. The inner screen is 951 × 669 in its natural landscape orientation (the 890 × 626 figure quoted on some sites is wrong). Sizes come from Apple’s screenshot specs and the iOS 27.1 simulator; Safari’s exact heights on the Duo have not been read with JavaScript yet.
Sources include DeviceAtlas, Chrome DevTools device list (EmulatedDevices.ts), iosref.com, ios-resolution.com. Researched September 2026.