Mobile viewport sizes (2026): iPhone, Android and iPad

Viewport size in CSS pixels, device pixel ratio and physical resolution for 51 popular phones and tablets released from 2016 to 2025 — the numbers your CSS media queries actually see.

Most common phone widths

Phones cluster around a handful of CSS widths. If your layout works at each of these, it will work on almost every phone in use:

• 344 px — Galaxy Z Fold 5 (folded)
• 360 px — Samsung Galaxy S7, Samsung Galaxy S8 / S9, Samsung Galaxy S10, Samsung Galaxy S20 / S21 and 3 more
• 375 px — iPhone 7, iPhone 8, iPhone X, iPhone XS and 3 more
• 384 px — Samsung Galaxy S23 / S24 Ultra
• 390 px — iPhone 12 / 13 / 14 / 16e
• 393 px — iPhone 14 Pro / 15 / 15 Pro / 16, Google Pixel 3, Google Pixel 4a / 5, Xiaomi Redmi Note 8 / 9 and 2 more
• 402 px — iPhone 16 Pro / 17 / 17 Pro
• 411 px — Google Pixel 2
• 412 px — Samsung Galaxy A51 / A52 / A53, Samsung Galaxy A14 / A15 / A54 / A55, Google Pixel 6 / 7 / 8, Google Pixel 9 / 9 Pro and 1 more
• 414 px — iPhone 7 Plus, iPhone 8 Plus, iPhone XR, iPhone XS Max and 2 more
• 420 px — iPhone Air
• 428 px — iPhone 12 / 13 Pro Max, 14 Plus
• 430 px — iPhone 14 Pro Max / 15 Plus / 15 Pro Max / 16 Plus
• 440 px — iPhone 16 Pro Max / 17 Pro Max

CSS pixels are not screen pixels. A phone with a pixel ratio of 3 draws each CSS pixel with 3×3 physical pixels, so a 393 px wide layout fills a 1179 px wide display. Media queries, width and vw all use CSS pixels.

iPhone viewport sizes

Android viewport sizes

Tablet viewport sizes

How to use these numbers

Treat the list as test points, not breakpoints. A layout that is fluid between 320 and 440 px wide covers every phone above; add breakpoints where your design starts to look stretched, not at a specific device's width. For the space above the fold, remember that the browser's address bar and toolbar take part of the screen — each device page lists how much.

To see a page at these sizes with the real browser engine (Safari's WebKit for Apple devices, Chromium for Android), run the free mobile-friendly test or tap around it in the phone window. More background: responsive design checker and the viewport meta tag.