Viewport Size Reference

Discover the most common viewport dimensions for responsive design, grouped by device type and paired with real-world device examples.

⌕

Phones (31 viewports)

Use these viewport clusters to understand common CSS widths and responsive ranges across real devices.

Viewport

412 × 915 PX

Devices

19%

Example devices

Google Pixel 9Google Pixel 9 ProGoogle Pixel 9 Pro XLXiaomi 14 Ultra

Viewport

360 × 800 PX

Devices

Example devices

Samsung Galaxy S21Motorola G84Redmi 12Motorola Moto G85

Viewport

360 × 780 PX

Devices

Example devices

Samsung Galaxy S24Samsung Galaxy S23Samsung Galaxy A54iPhone 13 mini

Viewport

390 × 844 PX

Devices

Example devices

iPhone 14iPhone 13 ProiPhone 13iPhone 12 Pro

Viewport

360 × 804 PX

Devices

Example devices

Nothing Phone (2a)Oppo A78Nothing Phone (1)Oppo Reno 12 Pro

Viewport

384 × 832 PX

Devices

Example devices

Samsung Galaxy S24 UltraSamsung Galaxy S23 UltraSamsung Galaxy S25 UltraSamsung Galaxy S26+

Viewport

430 × 932 PX

Devices

Example devices

iPhone 16 PlusiPhone 15 Pro MaxiPhone 15 PlusiPhone 14 Pro Max

Viewport

393 × 852 PX

Devices

Example devices

iPhone 16iPhone 15 ProiPhone 15iPhone 14 Pro

Viewport

412 × 906 PX

Devices

Example devices

OnePlus 12OnePlus 8 ProOnePlus 13Oppo Find X8 Pro

Viewport

402 × 874 PX

Devices

Example devices

iPhone 16 ProiPhone 17 ProiPhone 17

Viewport

412 × 919 PX

Devices

Example devices

OnePlus 11OnePlus 10 ProOnePlus 9 Pro

Viewport

428 × 926 PX

Devices

Example devices

iPhone 14 PlusiPhone 13 Pro MaxiPhone 12 Pro Max

Viewport

440 × 956 PX

Devices

Example devices

iPhone 16 Pro MaxiPhone 17 Pro Max

Viewport

375 × 667 PX

Devices

Example devices

iPhone SE (2022)iPhone SE (2024)

Viewport

412 × 883 PX

Devices

Example devices

Samsung Galaxy S22 UltraSamsung Galaxy Note20 Ultra

Viewport

393 × 851 PX

Devices

Example devices

Google Pixel 5Google Pixel 4a

Viewport

384 × 854 PX

Devices

Example devices

Samsung Galaxy S21 Ultra

Viewport

420 × 912 PX

Devices

Example devices

iPhone 17 Air

Viewport

480 × 1040 PX

Devices

Example devices

Samsung Galaxy S26 Ultra

Viewport

400 × 890 PX

Devices

Example devices

Xiaomi 15

Viewport

412 × 923 PX

Devices

Example devices

Google Pixel 10

Viewport

410 × 914 PX

Devices

Example devices

Google Pixel 10 Pro

Viewport

414 × 921 PX

Devices

Example devices

Google Pixel 10 Pro XL

Viewport

420 × 948 PX

Devices

Example devices

Huawei Pura 70 Pro

Viewport

360 × 792 PX

Devices

Example devices

Huawei Pura 70

Viewport

360 × 840 PX

Devices

Example devices

Sony Xperia 5 VI

Viewport

360 × 806 PX

Devices

Example devices

Nokia G42 5G

Viewport

420 × 933 PX

Devices

Example devices

Vivo X200 Pro

Viewport

412 × 900 PX

Devices

Example devices

Honor Magic 7 Pro

Viewport

412 × 924 PX

Devices

Example devices

OnePlus Nord 4

Viewport

360 × 820 PX

Devices

Example devices

LG Velvet 2 Pro

Common CSS Media Queries

A quick reference for broad responsive breakpoints. Use these as a starting point, then refine based on real viewport data.

Mobile Devices

@media (max-width: 480px) {
  /* Mobile phones */
}

@media (min-width: 481px) and (max-width: 768px) {
  /* Tablets */
}

Desktop & Larger

@media (min-width: 769px) {
  /* Tablets landscape */
}

@media (min-width: 1024px) {
  /* Desktops */
}

Frequently Asked Questions

Common questions about viewport sizes and responsive design.

What is a browser viewport?

A browser viewport is the visible area of a web page in a browser window. It determines which CSS media queries apply and how content is laid out. Viewport dimensions are measured in CSS pixels, not physical pixels.

What is the most common mobile viewport width?

The most common mobile viewport width is 360px, used by a wide range of Android devices including Samsung Galaxy and Xiaomi phones. The 390px viewport (iPhone 14/13 series) and 412px (Google Pixel series) are also very common.

How do I use viewport sizes for CSS media queries?

Use the viewport width as the breakpoint in a CSS @media rule. For example: @media (max-width: 390px) { /* iPhone 14 styles */ }. Use the Copy button on any viewport card to get the value ready to paste.

What is the difference between viewport size and screen resolution?

Screen resolution is the physical pixel count of a display (e.g., 1440 × 3120). Viewport size is the logical CSS pixel dimensions used for layout (e.g., 360 × 780). The ratio between them is the device pixel ratio (DPR).