Quick answer: Most current Android phones layout around 360–430 CSS pixels wide in portrait. Compact 1080p flagships (Galaxy S25/S26, Pixel 10/11) often land near 360×780–808. Dense 1440p Ultras and Plus models often land near ~480 CSS px wide in our resolution÷DPR estimate — but real Chrome/Samsung Internet values shift with display scaling and browser UI.
Use this chart as a responsive-design reference, then verify on hardware with the viewport checker.
How these CSS viewport sizes are calculated
Android does not publish one official CSS width per model. Browsers expose a logical viewport based on physical resolution and device pixel ratio (DPR), then shrink further for the toolbar.
Values below use:
CSS size ≈ physical pixels ÷ estimated DPR
from our device database. They are approximate. System font size, "Display size" scaling, foldables, and browser chrome all change the live number. That is why competitors who list a single viewport still caveat it — and why you should measure.
Read the deeper model in viewport vs screen width vs DPR.
Samsung Galaxy CSS viewport chart
| Model | Screen | Resolution | Est. DPR | Approx. CSS viewport |
|---|---|---|---|---|
| Galaxy S26 | 6.3″ | 2340 × 1080 | ~3 | ~360 × 780 |
| Galaxy S26+ | 6.7″ | 3120 × 1440 | ~3 | ~480 × 1040 |
| Galaxy S26 Ultra | 6.9″ | 3120 × 1440 | ~3 | ~480 × 1040 |
| Galaxy S25 | 6.2″ | 2340 × 1080 | ~3 | ~360 × 780 |
| Galaxy S25+ | 6.7″ | 3120 × 1440 | ~3 | ~480 × 1040 |
| Galaxy S25 Ultra | 6.9″ | 3120 × 1440 | ~3 | ~480 × 1040 |
| Galaxy S24 | 6.1″ | 2556 × 1179 | ~3 | ~393 × 852 |
Full diagonals and PPI: Galaxy S25 & S26 screen size guide · Galaxy S category.
Google Pixel CSS viewport chart
| Model | Screen | Resolution | Est. DPR | Approx. CSS viewport |
|---|---|---|---|---|
| Pixel 11 | 6.3″ | 2424 × 1080 | ~3 | ~360 × 808 |
| Pixel 11 Pro | 6.3″ | 2856 × 1280 | ~3 | ~427 × 952 |
| Pixel 11 Pro XL | 6.8″ | 2992 × 1344 | ~3 | ~448 × 997 |
| Pixel 10 | 6.3″ | 2424 × 1080 | ~3 | ~360 × 808 |
| Pixel 10 Pro | 6.3″ | 2856 × 1280 | ~3 | ~427 × 952 |
| Pixel 10 Pro XL | 6.8″ | 2992 × 1344 | ~3 | ~448 × 997 |
| Pixel 11 Pro Fold (inner) | 8.0″ | 2160 × 2076 | ~2.75 | ~755 × 785 |
OnePlus, Oppo, Vivo, Xiaomi & more
| Model | Screen | Resolution | Approx. CSS viewport |
|---|---|---|---|
| OnePlus 15 | 6.78″ | 2772 × 1272 | ~424 × 924 |
| OnePlus 13 | 6.82″ | 3168 × 1440 | ~480 × 1056 |
| OPPO Find X9 | 6.59″ | 2760 × 1256 | ~419 × 920 |
| OPPO Find X9 Pro | 6.78″ | 2772 × 1272 | ~424 × 924 |
| vivo X300 | 6.49″ | 2800 × 1260 | ~420 × 933 |
| vivo X300 Pro | 6.78″ | 2800 × 1260 | ~420 × 933 |
| Xiaomi 15 | 6.36″ | 2670 × 1200 | ~400 × 890 |
| Xiaomi 15 Ultra | 6.73″ | 3200 × 1440 | ~480 × 1067 |
| Honor Magic8 Pro | 6.71″ | 2808 × 1256 | ~419 × 936 |
| Motorola Edge 60 Pro | 6.7″ | 2712 × 1220 | ~407 × 904 |
| POCO F7 Pro | 6.67″ | 3200 × 1440 | ~480 × 1067 |
| Redmi Note 14 | 6.67″ | 2400 × 1080 | ~393 × 873 |
Browse brand indexes: Samsung, Google, OnePlus, Oppo, Vivo, Xiaomi, Honor, Motorola.
Practical breakpoint bands for Android traffic
You do not need a media query per model. Group by CSS width:
- ~360–393px: many 1080p compact/mid flagships (Galaxy S25/S26 base, Pixel base, mid-range Redmi)
- ~400–430px: common flagship band (Find X9, vivo X300, Xiaomi 15, Honor Magic)
- ~440–480px: large / high-density panels (Ultras, Plus, many 1440p Androids)
- ~750px+: foldables open
Test those bands with the responsive breakpoint checker and generate snippets in the media query generator.
For physical inch context across brands, see mobile screen sizes in 2026. For Apple's logical widths, use the iPhone 17 screen size chart.
FAQ
- What is the CSS viewport width of the Galaxy S25?
- From 2340 × 1080 at an estimated DPR of 3, the Galaxy S25 is about 360 × 780 CSS pixels. Live Chrome values can differ slightly with scaling and browser UI.
- Why do Android viewport sizes differ from iPhone?
- Different physical resolutions, DPR choices, and OEM display scaling produce different logical widths even when diagonals look similar. Always test an Android band and an iPhone band.
- Is screen resolution the same as viewport size?
- No. Resolution is the panel's pixel grid. Viewport size is the CSS layout area. Divide roughly by DPR to estimate — then measure on a real device.
- How do I check my Android phone's viewport?
- Open the free viewport checker in Chrome on the phone. Pair it with the DPR checker and the CSS viewport units tool if you are debugging 100vh vs 100dvh.
The short answer
Design Android layouts for ~360–430 CSS px first, then verify large ~440–480 px phones and foldables. Treat every number in this chart as an estimate from resolution and DPR — confirm with What is my viewport, compare models in Compare, and browse the device database.
Related Articles
Continue reading with these related posts
iPhone 17, Air & Pro Max Screen Sizes: Inches, Resolution, PPI
The iPhone 17 is 6.3 inches, the iPhone Air 6.6 inches, and the iPhone 17 Pro Max 6.9 inches. This chart lists every iPhone 17 model's screen size, resolution, pixel density, aspect ratio, and approximate CSS viewport width.
Samsung Galaxy S25 & S26 Screen Sizes: Inches, Resolution, PPI
The Galaxy S25 measures 6.2 inches and the S25 Ultra 6.9 inches. This guide lists every Galaxy S25 and S26 model's screen size, resolution, pixel density, aspect ratio, refresh rate, and approximate CSS viewport width in one chart.
Mobile Screen Sizes in 2026: Compact, Mainstream, and Large Phones
Most phones people use sit between about 6.1 and 6.8 inches. This guide groups compact, mainstream, and large models across major brands, then covers the viewport widths and breakpoints that matter for responsive design.