Smallest whole-pixel size 9 × 20.
In CSS: aspect-ratio: 9 / 20. Rotated it becomes 20:9.
Where 9:20 is used
Samsung Galaxy S series, many Android flagships.
Slightly taller than Apple's, giving the same diagonal a narrower body.
Rendered live with aspect-ratio: 9 / 20.
9:20 resolutions
Every size below is exactly 9:20 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 162 × 360 | 162 | 360 | 0.06 | — |
| 171 × 380 | 171 | 380 | 0.06 | — |
| 180 × 400 | 180 | 400 | 0.07 | — |
| 189 × 420 | 189 | 420 | 0.08 | — |
| 198 × 440 | 198 | 440 | 0.09 | — |
| 207 × 460 | 207 | 460 | 0.1 | — |
| 216 × 480 | 216 | 480 | 0.1 | — |
| 225 × 500 | 225 | 500 | 0.11 | — |
| 234 × 520 | 234 | 520 | 0.12 | — |
| 243 × 540 | 243 | 540 | 0.13 | — |
| 252 × 560 | 252 | 560 | 0.14 | — |
| 261 × 580 | 261 | 580 | 0.15 | — |
| 270 × 600 | 270 | 600 | 0.16 | — |
| 279 × 620 | 279 | 620 | 0.17 | — |
| 288 × 640 | 288 | 640 | 0.18 | — |
| 297 × 660 | 297 | 660 | 0.2 | — |
| 306 × 680 | 306 | 680 | 0.21 | — |
| 315 × 700 | 315 | 700 | 0.22 | — |
| 324 × 720 | 324 | 720 | 0.23 | — |
| 333 × 740 | 333 | 740 | 0.25 | — |
| 342 × 760 | 342 | 760 | 0.26 | — |
| 351 × 780 | 351 | 780 | 0.27 | — |
| 360 × 800 | 360 | 800 | 0.29 | — |
| 369 × 820 | 369 | 820 | 0.3 | — |
| 378 × 840 | 378 | 840 | 0.32 | — |
| 387 × 860 | 387 | 860 | 0.33 | — |
| 396 × 880 | 396 | 880 | 0.35 | — |
| 405 × 900 | 405 | 900 | 0.36 | — |
| 414 × 920 | 414 | 920 | 0.38 | — |
| 423 × 940 | 423 | 940 | 0.4 | — |
| 432 × 960 | 432 | 960 | 0.41 | — |
| 441 × 980 | 441 | 980 | 0.43 | — |
| 450 × 1000 | 450 | 1000 | 0.45 | — |
| 459 × 1020 | 459 | 1020 | 0.47 | — |
| 468 × 1040 | 468 | 1040 | 0.49 | — |
| 477 × 1060 | 477 | 1060 | 0.51 | — |
| 486 × 1080 | 486 | 1080 | 0.52 | — |
| 495 × 1100 | 495 | 1100 | 0.54 | — |
| 504 × 1120 | 504 | 1120 | 0.56 | — |
| 513 × 1140 | 513 | 1140 | 0.58 | — |
Using 9:20 in CSS
/* Modern — one line */
.box { aspect-ratio: 9 / 20; }
/* With a fixed width */
.box { width: 100%; max-width: 360px; aspect-ratio: 9 / 20; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 222.2222%; }
.box-legacy > * { position: absolute; inset: 0; }Devices with a 9:20 screen
| Device | Native resolution | CSS viewport | Diagonal |
|---|---|---|---|
| Samsung Galaxy S21 | 1080 × 2400 | 360 × 800 | 6.2″ |
| Google Pixel 10 Pro XL | 1344 × 2992 | 448 × 997 | 6.8″ |
| Google Pixel 10 Pro | 1280 × 2856 | 427 × 952 | 6.3″ |
| Google Pixel 10 | 1080 × 2424 | 412 × 916 | 6.3″ |
| Google Pixel 9 Pro XL | 1344 × 2992 | 448 × 997 | 6.8″ |
| Google Pixel 9 Pro | 1280 × 2856 | 427 × 952 | 6.3″ |
| Google Pixel 9 | 1080 × 2424 | 412 × 916 | 6.3″ |
| Google Pixel 9a | 1080 × 2424 | 412 × 916 | 6.3″ |
| Google Pixel 8 Pro | 1344 × 2992 | 448 × 997 | 6.7″ |
| Google Pixel 8 | 1080 × 2400 | 412 × 915 | 6.2″ |
Questions about 9:20
What resolution is 9:20?
9:20 is a ratio, not a fixed resolution — any size where width ÷ height equals 0.45 qualifies. The smallest whole-pixel pair is 9 × 20, and common ones include .
What is 9:20 used for?
Samsung Galaxy S series, many Android flagships.
How do I set 9:20 in CSS?
Use the aspect-ratio property: aspect-ratio: 9 / 20;. The element then keeps that shape at any width. It is supported in every current browser.
What is 9:20 the other way round?
Rotated 90 degrees it becomes 20:9.
How do I calculate a 9:20 height from a width?
Multiply the width by 2.222222. For example width × ratio = height. The calculator does it both directions.