screensize.net

iPhone Viewport Sizes

Look up portrait CSS size references and DPR for tracked iPhones. Group models by width and copy a reference list for manual testing.

Portrait referencesBy model and widthCopy a testing list

These are testing references. Safari’s live viewport can differ with browser UI, zoom and device settings. The listed height is not a guarantee of the currently visible page area.

16 tracked models with portrait references · 7 width groups. Coverage is limited to the models listed here. Sources and coverage

iPhone CSS references by model

Sizes use CSS pixels; panel resolution uses physical pixels. DPR belongs to the listed reference configuration.

16 reference configurations shown

Portrait CSS size and DPR references by iPhone model and display configuration
iPhone 18 Pro402 × 874portrait · reference3×1206 × 26222026
iPhone 18 Pro Max440 × 956portrait · reference3×1320 × 28682026
iPhone 16e390 × 844portrait · reference3×1170 × 25322025
iPhone 17402 × 874portrait · reference3×1206 × 26222025
iPhone 17 Pro402 × 874portrait · reference3×1206 × 26222025
iPhone 17 Pro Max440 × 956portrait · reference3×1320 × 28682025
iPhone Air420 × 912portrait · reference3×1260 × 27362025
iPhone 16393 × 852portrait · reference3×1179 × 25562024
iPhone 16 Plus430 × 932portrait · reference3×1290 × 27962024
iPhone 16 Pro402 × 874portrait · reference3×1206 × 26222024
iPhone 16 Pro Max440 × 956portrait · reference3×1320 × 28682024
iPhone 15393 × 852portrait · reference3×1179 × 25562023
iPhone 15 Pro393 × 852portrait · reference3×1179 × 25562023
iPhone 15 Pro Max430 × 932portrait · reference3×1290 × 27962023
iPhone 14390 × 844portrait · reference3×1170 × 25322022
iPhone SE (3rd gen)375 × 667portrait · reference2×750 × 13342022

Group iPhones by reference width

Reuse a width target across models while keeping differences in height, DPR and reference status. A width group is not a suggested production media query or a complete device test plan.

Select width groups to copy. Each group includes all its listed profiles. Filters in the model table do not change this selection.

Select width groups to copy

375 × 667 · DPR 2portrait · reference

390 × 844 · DPR 3portrait · reference

393 × 852 · DPR 3portrait · reference

402 × 874 · DPR 3portrait · reference

420 × 912 · DPR 3portrait · reference

430 × 932 · DPR 3portrait · reference

440 × 956 · DPR 3portrait · reference

Enable JavaScript to select and copy references.

How to use these values

CSS size reference

A named configuration for layout simulation and test planning. Use it as a starting point, then test nearby widths and the breakpoints where your content changes.

Layout viewport

The space used to lay out the page. Our live checker reads window.innerWidth and window.innerHeight. Its values describe the current browser window, not a fixed model specification.

Visual viewport

The area you can currently see. Pinch zoom and the on-screen keyboard can change it without the same change to the layout viewport. The live checker does not report the VisualViewport API.

  1. Choose the relevant width groups above and copy the full references to keep the associated heights, DPR and model names.
  2. Set up custom DevTools simulation targets. Check navigation, cards, dialogs and forms at those sizes and between them.
  3. Check supported real devices in portrait and landscape, with the keyboard open and browser controls expanded or collapsed. For full-height UI, consider svh, lvh and dvh according to the behavior you need.
  4. Check edge-aligned controls with CSS safe-area insets. Shared dimensions do not guarantee matching safe areas or browser behavior.
Check this browserOpen QA checklist

Sources and coverage

Manufacturer links below support hardware specifications such as panel resolution. Chrome DevTools source links, where listed, document emulation references. Neither provides a guarantee of Safari’s live viewport or the DPR in every display setting.

CSS sizes in this table are reference configurations. Some newer records reuse an earlier model’s reference group. Measurement environments and original CSS reference provenance are not documented for every listed model, so this is not a table of independently measured Safari viewports. A hardware verification date does not mean that the CSS reference was measured on that date.

Models and display configurations without a reliable portrait reference are listed separately above. Matching panel specifications or dividing panel pixels by DPR cannot, by itself, prove a live browser viewport.

For browser behavior, see MDN’s viewport concepts, VisualViewport API, and WebKit’s explanation of small, large and dynamic viewport units. These explain browser behavior, not individual model dimensions.

Device sources by model

Frequently asked questions

›What viewport size should I target for iPhones?

The tracked portrait references span these widths: 375, 390, 393, 402, 420, 430, 440 CSS px. Choose relevant groups for your test plan and also test between them. Let your content determine breakpoints; these widths are not a measure of device popularity.

›Why are CSS dimensions smaller than panel resolution?

CSS pixels are logical units used for layout. Panel resolution counts physical pixels, while DPR relates device pixels to CSS pixels. Display settings and browser behavior can affect the relationship, so panel resolution alone does not establish a live browser viewport.

›Can I swap width and height for landscape?

Swapping dimensions can give you a starting simulation target, but it does not guarantee the real landscape viewport. Check landscape separately: browser UI, zoom, device settings and safe-area layout can affect the space available to your content.

›Does a matching reference mean two iPhones behave identically?

No. A shared reference lets you reuse a layout target, but browser versions, display settings, safe areas and interaction behavior can differ. DevTools simulation helps find layout issues; it does not replace checks on the real devices you support.

Related tools

Copy manually

Clipboard access is unavailable. The text is selected below; use your browser's Copy command, Ctrl+C, or ⌘C.