Understanding Logical vs. Physical Pixels
The 390x844 dimensions represent the logical pixel viewport of modern iPhones, including the iPhone 12, 13, 14, and 15 standard models. This is distinct from the physical pixel resolution of 1170x2532, which is three times larger in each dimension. Logical pixels, also called CSS pixels or device-independent pixels, are the units that web developers work with in CSS and JavaScript. The browser abstracts away the physical pixel density, so a 390px-wide container fills the screen width regardless of whether the device has a 2x or 3x physical pixel ratio. This abstraction is what makes responsive design practical across the enormous variety of screen densities in the mobile device landscape.
Common Mobile Viewport Widths
While 390px is the most common current iPhone viewport width, mobile viewports range from 320px (iPhone SE and older 4-inch models) to 430px (iPhone Pro Max models). Android devices add even more variety, with common widths of 360px, 375px, 384px, 393px, 412px, and 428px. For practical responsive development, design your mobile layout to work fluidly across the 320px to 430px range rather than targeting a single width. Use percentage-based widths, flexbox, and CSS grid with fr units to create layouts that adapt naturally. Test at 320px to ensure nothing breaks on the narrowest devices, and at 430px to verify that wider phones do not introduce awkward spacing.
Viewport Configuration and Meta Tags
To ensure your web page renders at the device's logical viewport width, include the viewport meta tag: . Without this tag, mobile Safari defaults to a 980px-wide virtual viewport and scales the page down to fit, which results in tiny, unreadable text. The width=device-width directive tells the browser to match the viewport to the logical screen width (390px on an iPhone 14). Avoid setting user-scalable=no or maximum-scale=1, as these restrict pinch-to-zoom accessibility and are ignored by modern iOS Safari anyway. If you need to prevent zoom on form inputs specifically, set font-size to at least 16px on all input elements.
Designing at the 390px Breakpoint
At 390px, every pixel of horizontal space matters. A standard approach uses 16px horizontal padding on each side, leaving 358px for content. Navigation should collapse into a hamburger menu or bottom tab bar. Images should span the full content width for maximum impact, using aspect-ratio CSS property to maintain dimensions during loading and prevent layout shift. Cards and list items should stack vertically in a single column. Typography scales typically use 16px for body text, 20-24px for section headings, and 28-32px for page titles. Form inputs should be full-width with at least 48px height for comfortable touch interaction. Use the min() and clamp() CSS functions for fluid typography that scales between mobile and desktop without discrete breakpoints, for example: font-size: clamp(1rem, 4vw, 1.5rem).