Phone Screen Viewports List

To optimize your responsive layouts for mobile screens, you need to target the correct viewport dimensions. This lookup table details the viewport sizes, physical resolutions, and device pixel ratios (DPR) for popular iPhone and Android devices.

To check your own device’s active viewport configuration right now, use our live screen resolution checker or test your scaling settings on the viewport checker.

The core concept: physical vs. logical pixels

Before looking at device-specific lookup sheets, it is crucial to understand the display math that governs modern smartphones. Mobile screens have evolved to become incredibly high-density panels, often packing 300 to 500+ pixels per inch (PPI). If mobile browsers mapped web elements on a 1:1 pixel basis, standard desktop sites would be microscopic and completely unreadable on a phone.

To solve this, mobile operating systems and browsers separate pixels into two distinct classes:

1. Physical hardware pixels

Physical pixels are the physical hardware dots on the screen. For example, an iPhone 15 Pro features a physical resolution of 1179 × 2556 pixels. These represent the actual red, green, and blue subpixel clusters built into the OLED substrate.

2. Logical CSS pixels (viewport coordinates)

CSS pixels represent the virtual grid that web pages use to lay out text, buttons, and columns. The logical viewport for that same iPhone 15 Pro is 393 × 852 CSS pixels. This is the value that media queries target inside your stylesheets.

3. Device pixel ratio (DPR)

The scale factor that connects physical pixels to logical viewports is the Device Pixel Ratio (DPR).

For high-density displays (such as Apple’s Retina screen or Samsung’s Super AMOLED), the DPR is typically an integer or a half-integer, like 2, 3, or 2.625. At a DPR of 3, the browser uses a 3x3 grid of 9 physical hardware pixels to render a single logical CSS layout block, resulting in razor-sharp display clarity.

2026 Apple iPhone viewport & resolution specs

Apple devices utilize strict scaling integers (generally @2x and @3x). This makes responsive design planning highly predictable for iOS. The list below represents standard specifications for modern iPhone classes.

For detailed physical pixel checks and aspect calculations on these models, you can cross-reference the device resolution database to compare mobile layout specs side-by-side.

2026 Android phone viewport & resolution specs

Android devices feature a wider variety of device pixel ratios (often using non-integer scaling like 2.625 or 3.5) to handle display density adjustments across different physical dimensions.

To learn more about standard screen aspect ratios and physical screen space calculations, you can read our comprehensive aspect ratio guide.

How to handle phone viewports in CSS media queries

When coding media queries in your stylesheets, you should target logical viewports (CSS pixels) and not physical hardware resolutions. A common beginner error is targeting 1080px in mobile media queries, which is a physical resolution width. This causes desktop styles to render on high-density smartphones.

Standard CSS breakpoint ranges

When writing responsive design queries, use the standard breakpoints:

• Small Mobile Screens: Up to 375px width (covers iPhone SE, older Android devices).
• Medium/Large Mobile Screens: 376px to 480px width (covers modern Pro Max, Ultra, and Pixel devices).
• Tablets and Foldables: 481px to 768px width (covers iPad Portrait, Galaxy Z Fold).

To obtain ready-made layout coordinates, check our CSS breakpoints guide to copy media queries.

Why smartphone viewports differ from physical screen sizes

When mobile manufacturers list device specifications, they display physical diagonals and pixel resolutions (e.g., 6.7” diagonal and 1290x2796 px). However, viewports change based on browser rendering settings:

OS scaling controls

Both iOS and Android include built-in scaling features (such as “Display Zoom” or “Font Size” sliders). If a user increases their system font size, the operating system decreases the logical CSS viewport width (e.g., down from 393px to 320px) to force elements to render larger.

Browser address bars & Chrome

Logical width coordinates remain constant, but viewport height constantly fluctuates as users scroll. Browser components like Safari’s bottom tab bar or Chrome’s top address bar decrease active height. Use CSS dynamic viewport units like dvh (dynamic viewport height) and lvh (large viewport height) instead of standard vh units.

Design and development guidelines for high-density screens

To ensure your web designs look crisp and load quickly on mobile displays:

1. Serve 2x and 3x Image Assets: A standard 1x logo will look fuzzy on an iPhone’s 3x display. Export image assets at 2x and 3x sizes, or use modern vector formats like SVGs which scale infinitely without loss of detail.
2. Implement Responsive Picture Tags: Packing large 3x images onto all devices increases load times and wastes bandwidth on older phones. Use the <picture> tag with srcset parameters to serve the ideal file size based on the user’s DPR:

   <picture>
     <source srcset="logo-3x.png 3x, logo-2x.png 2x" />
     <img src="logo-1x.png" alt="Company Logo" />
   </picture>

3. Verify Interactive Tap Targets: Mobile screens are operated by fingers, not mouse pointers. Ensure all links, buttons, and inputs measure at least 44 × 44 logical pixels to maintain accessibility and prevent misclicks.

For more technical snippets on viewport calculations, check our display API snippet library.

Sourcing & accuracy disclaimer

Silo specifications and phone viewports are cross-referenced with developer portals, including Apple’s UIKit documentation, Android Developer layout specifications, and verified client-side browser user-agent testing data logs from ScreenRes. Check our privacy policy for information regarding data collection.

Data verified: June 2026

Frequently asked questions