iPhone CSS pixels guide
iPhone Viewport Sizes: CSS Pixels to Test Before You Ship
iPhone viewport sizes are the CSS pixel widths your media queries actually see. Use this table to plan a small mobile QA pass that covers old SE screens, modern standard iPhones, Plus models, and Pro Max layouts.
iPhone viewport sizes table
These portrait values are practical iPhone CSS pixels. Browser chrome, Display Zoom, orientation, and safe-area insets can change the usable height, so treat height as a testing baseline rather than a promise.
CSS pixels
| iPhone model examples | CSS viewport | Width | DPR | Use it for |
|---|---|---|---|---|
| iPhone 5, 5s, SE (1st gen) | 320 x 568 | 320px | 2x | Legacy tiny-phone guardrail for cramped forms, menus, and fixed-width content. |
| iPhone 6, 7, 8, SE (2nd/3rd gen) | 375 x 667 | 375px | 2x | Short-screen iPhone size for checkout, keyboard, banner, and sticky CTA testing. |
| iPhone X, XS, 11 Pro, 12/13 mini | 375 x 812 | 375px | 3x | Same width as SE, taller screen; useful for safe-area and notch checks. |
| iPhone 12, 13, 14, 16e | 390 x 844 | 390px | 3x | A reliable everyday iPhone baseline for mobile viewport sizes. |
| iPhone 14 Pro, 15, 15 Pro, 16 | 393 x 852 | 393px | 3x | Common modern iPhone CSS pixels for nav, pricing cards, and product pages. |
| iPhone 16 Pro, 17, 17 Pro | 402 x 874 | 402px | 3x | Newer Pro-sized width; good for layouts tuned too tightly around 390px. |
| iPhone XR, XS Max, 11, 11 Pro Max | 414 x 896 | 414px | 2x or 3x | Large classic iPhone width where rows, cards, and media often reflow. |
| iPhone Air | 420 x 912 | 420px | 3x | Mid-large current iPhone width between standard Pro and Max models. |
| iPhone 14 Plus | 428 x 926 | 428px | 3x | Large Plus-size viewport for wide phone grids and image crops. |
| iPhone 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus | 430 x 932 | 430px | 3x | Large modern iPhone CSS width before the newest Pro Max jump. |
| iPhone 16 Pro Max, 17 Pro Max | 440 x 956 | 440px | 3x | Largest common iPhone viewport size to catch over-comfortable mobile layouts. |
The practical iPhone QA pack
You do not need every model in every release. Start with a few representative mobile viewport sizes, then add exact widths only when analytics or a recent bug points there.
Small iPhone
320px, 375px
Use this range for mobile navigation, forms, cookie banners, checkout steps, and any CTA that must stay reachable above the keyboard.
Modern default iPhone
390px, 393px, 402px
Use these iPhone CSS pixels as your daily mobile QA set before adding another breakpoint.
Large iPhone
414px, 420px, 428px, 430px, 440px
Use the wide-phone range to catch grids, cards, galleries, sticky footers, and layout rules that should not become tablet UI yet.
Landscape pass
568px to 956px wide
Rotate only the highest-risk states: nav open, modal open, form errors, sticky header, and dense product or dashboard views.
How to use iPhone CSS pixels
Media queries respond to CSS pixels, not the physical panel resolution. A 3x iPhone can have more than 1200 physical pixels across and still behave like a 402px viewport in CSS.
- Use CSS pixels for media queries, not physical screen resolution.
- Keep breakpoints tied to content problems instead of exact iPhone model names.
- Test just below and just above 390px, 402px, 430px, and 440px when mobile CSS changes.
- Check safe-area padding, notch spacing, sticky bars, and bottom CTAs on tall iPhones.
- Run one landscape pass before shipping important forms, menus, and overlays.
Breakpoint example
Exact device queries get brittle quickly. Use viewport clusters to define ranges, then test the content at the edges with Sizzy.
@media (max-width: 374px) {
/* Tiny iPhones and older narrow phones */
}
@media (min-width: 375px) and (max-width: 439px) {
/* Most iPhone CSS pixel widths */
}
@media (min-width: 440px) {
/* Large iPhone Pro Max and wider mobile */
}Turn the iPhone list into a real responsive pass
Check a single viewport, generate a browser size pack, validate CSS breakpoints, then compare screenshots across the mobile states that matter.
Related Sizzy tools
Viewport Checker
Check any iPhone viewport width, breakpoint category, aspect ratio, and CSS helper.
Browser Size Cheat Sheet
Build a practical mobile viewport sizes pack for product, marketing, and checkout pages.
CSS Breakpoint Checker
Paste media queries or Tailwind screens and find breakpoint gaps around iPhone widths.
Screenshot Comparison Checklist
Plan baseline and candidate screenshots across iPhone, tablet, and desktop states.
FAQ
What are iPhone viewport sizes?
iPhone viewport sizes are the CSS pixel dimensions that Safari, Chrome, and responsive CSS use after device pixel ratio scaling. They are smaller than physical screen resolution.
What iPhone CSS pixels should I test first?
Start with 375px for small iPhones, 390px or 393px for common modern iPhones, 402px for newer Pro-sized iPhones, and 430px or 440px for large iPhones.
Are iPhone viewport sizes and screen resolutions the same?
No. Screen resolution counts physical pixels. CSS media queries use CSS pixels, so a 1206px-wide iPhone display can behave like a 402px-wide viewport.
Should I create CSS breakpoints for every iPhone model?
No. Use iPhone viewport sizes to find where the layout breaks, then create content-based breakpoints that cover ranges instead of individual devices.