Common Mobile Viewport Sizes List: Phones by Viewport Size
Common Mobile Viewport Sizes List. Filter this list by device type to find the mobile viewport sizes you need to design and test for. A quick pass through the responsive website tester catches issues before they become real problems.
Interactive Tool
Common Mobile Viewport Sizes
| CSS Viewport | Devices | Device Pixel Ratio | Physical Resolution | Testing Priority |
|---|---|---|---|---|
| 360×800 | Samsung Galaxy S24, most mid-range Android | 3× | 1080×2400 | High |
| 390×844 | iPhone 13/14/15 | 3× | 1170×2532 / 1179×2556 | High |
| 393×852 | iPhone 15 Pro, iPhone 16 | 3× | 1179×2556 | High |
| 414×896 | iPhone 11, iPhone XR | 2× | 828×1792 | Medium |
| 375×667 | iPhone SE, iPhone 8 | 2× | 750×1334 | Medium |
| 412×915 | Google Pixel 8, Pixel 7 | 2.625× | 1080×2400 | Medium |
| 360×640 | Older/budget Android baseline | 2× | 720×1280 | Medium |
| 768×1024 | iPad (portrait), iPad Air | 2× | 1536×2048 | High |
| 810×1080 | iPad 10th gen (portrait) | 2× | 1620×2160 | Medium |
| 1024×1366 | iPad Pro 12.9″ (portrait) | 2× | 2048×2732 | Medium |
| 912×1368 | Surface Pro (portrait) | 1.5× | 1368×2052 | Low |
| 280×653 | Small/folded foldables (e.g. Galaxy Z Fold, cover screen) | 3× | 840×1960 | Low |
This Common Mobile Viewport Sizes List narrows down every device ever made to the CSS viewport widths you actually need to design and test against, each row naming the real devices that share it. Use the Filter by device type dropdown to switch between phones and tablets, and you'll get the viewport size in CSS pixels, the device pixel ratio, the physical resolution behind it, and a testing-priority rating so you know which breakpoints to check first.
Before you set a single breakpoint, you need to know how wide a handset really is to your stylesheet. This common mobile viewport sizes list gives you the viewport width and height in CSS pixels for the Apple, Samsung, Google and tablet devices your layout and UI will meet most, plus the ratio that links each one to its hardware resolution, so your responsive design starts from measured numbers.
Common Mobile Viewport Sizes List for Current Phones
Rows run narrowest to widest, as each device reports to its default browser. Apple rows are iPhone models unless marked iPad; tablets close the list as a separate device type. Use the device screen size database tool to see concrete figures before you rely on a single spec sheet.
| Brand | Model | Viewport (px) | Screen resolution | CSS pixel ratio | Display size |
|---|---|---|---|---|---|
| Samsung | Galaxy S22, S23 | 360 × 780 | 1080 × 2340 | 3 | 6.1 in |
| Samsung | Galaxy S21 | 360 × 800 | 1080 × 2400 | 3 | 6.2 in |
| Apple | SE (2nd and 3rd gen) | 375 × 667 | 750 × 1334 | 2 | 4.7 in |
| Apple | 12, 13, 14 | 390 × 844 | 1170 × 2532 | 3 | 6.1 in |
| Apple | 14 Pro, 15, 15 Pro, 16 | 393 × 852 | 1179 × 2556 | 3 | 6.1 in |
| Apple | 16 Pro, 17 | 402 × 874 | 1206 × 2622 | 3 | 6.3 in |
| Pixel 7, Pixel 8 | 412 × 915 | 1080 × 2400 | 2.625 | 6.2–6.3 in | |
| Samsung | Galaxy S20 Ultra | 412 × 915 | 1440 × 3200 | 3.5 | 6.9 in |
| Apple | 11, XR | 414 × 896 | 828 × 1792 | 2 | 6.1 in |
| Apple | 14 Pro Max, 15 Plus, 15 Pro Max, 16 Plus | 430 × 932 | 1290 × 2796 | 3 | 6.7 in |
| Apple | 16 Pro Max, 17 Pro Max | 440 × 956 | 1320 × 2868 | 3 | 6.9 in |
| Apple | iPad mini (6th gen) | 744 × 1133 | 1488 × 2266 | 2 | 8.3 in |
| Apple | iPad (10th gen) | 820 × 1180 | 1640 × 2360 | 2 | 10.9 in |
Almost every current phone falls between 360 and 440 px wide, while the viewport height swings from 667 to 956. Two Google Pixel models match a Galaxy S20 Ultra at 412 × 915 despite its bigger screen size and sharper display, so hardware specs alone tell you little. Ranked by popularity, browser statistics worldwide keep putting the 360, 390–393 and 412–414 widths among the most common screen sizes, since they cover high-volume Android smartphones and recent base Apple models.
Grouping Phones by Screen Width
Rather than track every model, designers use width classes:
- Compact (360–375 px): Galaxy S21–S23 and the SE, your minimum design width.
- Standard (390–402 px): base and Pro iPhone models from the 12 onward.
- Large (412–440 px): Pixel, Plus and Pro Max models.
Screen heights matter less than screen width because pages scroll, but the shortest viewport dimensions (667 px) decide what fits above the fold. Fluid layouts that stretch between classes beat widths tuned to one handset.
How Viewport Size Relates to Screen Resolution
Your viewport size is the display area a page gets: the browser window minus the title bar, URL bar and any scroll bars. It is measured in CSS pixels, not hardware dots, which is why a 6.1-inch handset with over a thousand pixels across reports under 400 px. The physical screen size stays fixed; only the density changes. Browse the full reference with the free resolution name lookup, searchable directly in your browser.
Device Pixel Ratio, Physical Pixels and Pixel Density
The device pixel ratio (DPR) is how many physical pixels sit along one stylesheet pixel. That unit also goes by logical pixels, software pixels or the device-independent pixel of mobile design tools. Divide the resolution by the ratio to get the viewport:
$$\text{Width (px)} = \frac{\text{Resolution width}}{\text{DPR}}$$
A Galaxy S21 has 1,080 hardware pixels across at a DPR of 3, so \(1080 \div 3 = 360\) px, and each one uses 32 = 9 physical pixels. That is why high pixel density screens look sharp; Apple's first Retina display doubled the pixels per inch (PPI) at the same size. PPI and dots per inch (DPI) never change the viewport. Fractional ratios are common on Android: the Google Pixel 7 runs at 2.625, so 1,080 divides to 411.4 and rounds to 412.
Native Screen Resolution vs Effective Screen Resolution
Native resolution is the full hardware grid; a Full HD panel is 1920 x 1080. Effective resolution applies display scaling: a 2560 × 1600 laptop at 200% behaves like 1280 × 800, and a 4K monitor at 150% reports 2560 × 1440. Desktops often run at a ratio of 1 or 2, but phones are always scaled, so their effective numbers are their viewport.
Using Viewport Dimensions in Responsive Web Design
Responsive web design (RWD) turns the width classes above into rules, not device targets, so developers and web designers who build websites around them deliver a better user experience (UX).
Add the Viewport Meta Tag First
None of these widths apply unless your HTML includes the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, mobile browsers render a 980 px desktop-width page and shrink it, so web applications need pinch-zooming to use.
Media Queries and Breakpoints That Fit Real Phones
Media queries should follow your content, not individual handsets. Set base styles for 360 px, the narrowest common width here, and add breakpoints only where the CSS layout strains:
- 390 px: standard Apple widths, so widen gutters.
- 412 px: Pixel, Galaxy Ultra, Plus and Pro Max models, so allow two-column cards.
- 744 px: small tablets such as the iPad mini, so switch to tablet navigation.
Add a min-height condition to a min-width media query only when a component, like a full-height hero, needs vertical space.
Portrait and Landscape Orientation
Every width above assumes portrait orientation. Rotate a handset and 393 × 852 becomes 852 × 393, which passes the 744 px breakpoint with only 393 px of height. On a touch screen, test touch events and gestures too: a multi-touch pinch and zoom enlarges the visible viewport but never changes the width your media rules read. Tall aspect ratio panels (about 19.5:9) with a high screen-to-body ratio also hide content under notches.
How to Check the Viewport on Your Own Devices
To read the viewport size of a handset you own, open a page that prints window.innerWidth and window.innerHeight, or use Chrome DevTools:
- Press F12 (Cmd+Option+I on a Mac) and click the device toolbar icon.
- Pick a preset such as a Google Pixel or Galaxy model, or type a custom screen size.
- Drag the edges to watch the width change live; vw and vh units scale with it.
Emulators are a start for cross-browser compatibility, not the finish. Real smart phones show address bars that shrink the visible height as you scroll, so end your web development testing on one real Galaxy or Pixel handset and one Apple device.
Frequently Asked Questions
- What is a viewport size and how is it different from screen resolution?
- The viewport size is the visible area of a web page in a browser, measured in CSS pixels. Screen resolution refers to the actual physical pixels on the display. Due to device pixel ratios (DPR), a phone with a 1080×2340 physical resolution may have a viewport of only 360×780 CSS pixels. Web developers use viewport sizes for responsive design, not raw resolutions.
- What are the most common mobile viewport widths in 2026?
- The most frequently encountered mobile viewport widths in 2026 are 360px, 390px, 393px, 412px, and 414px. Samsung devices cluster around 360–412px while Apple iPhones typically land at 390–430px. Designing breakpoints around these widths ensures coverage for the majority of mobile users worldwide.
- What is the ideal screen size for responsive design?
- There is no single ideal size, but responsive designs should prioritize a mobile-first approach starting at 320px wide, then scale up through 360px, 390px, 412px, 768px (tablets), and 1024px+ (desktop). Testing at 360px and 390px covers the largest share of real mobile traffic globally.
- What is a device pixel ratio (DPR) and why does it matter?
- The device pixel ratio (DPR) is the ratio of physical screen pixels to CSS pixels. A DPR of 3 means a 390×844 viewport uses 1170×2532 physical pixels. Higher DPRs produce sharper displays (like Apple Retina or Samsung QHD screens). For web development, DPR affects image resolution — you should serve 2x or 3x images for high-DPR devices to avoid blurriness.
- Should I test on emulators or real devices for screen resolution testing?
- Both have value. Emulators and browser DevTools are excellent for quickly checking layout at various viewport sizes and are free to use. However, real devices reveal hardware-specific rendering differences, touch behavior, and performance characteristics that emulators can miss. For critical releases, combining both approaches gives the best coverage.
- How does orientation (portrait vs landscape) affect the viewport?
- When a device rotates from portrait to landscape, the width and height values swap. For example, a phone with a 390×844 portrait viewport becomes 844×390 in landscape. Some devices also adjust the viewport height slightly due to browser chrome. Always test both orientations to ensure your layout doesn't break when users rotate their phones.
- Can screen resolution impact website accessibility?
- Yes. Users who zoom in (a common accessibility behavior) effectively reduce the available viewport width, which can break navigation menus or hide content. Designing with flexible, fluid layouts and relative units (rem, %, vw) rather than fixed pixel widths ensures your site remains accessible across all resolutions and zoom levels.
- What are common layout issues that only appear on certain mobile viewports?
- Common issues include text overflow on narrow viewports below 360px, horizontal scrollbars caused by fixed-width elements, tap targets that are too small on high-DPR screens, and images that appear blurry on 3x DPR devices when only 1x assets are served. Running tests across the top 5–10 viewport widths catches the vast majority of these issues.