Smallest whole-pixel size 1 × 2.
In CSS: aspect-ratio: 9 / 18. Rotated it becomes 2:1.
Where 9:18 is used
Phones from around 2017 — the first generation of "tall" screens.
The 2:1 phone screen arrived when bezels shrank and the home button disappeared.
Rendered live with aspect-ratio: 9 / 18.
9:18 resolutions
Every size below is exactly 9:18 — no rounding. Sizes marked as a standard are named display resolutions.
| Resolution | Width | Height | Megapixels | Standard |
|---|---|---|---|---|
| 320 × 640 | 320 | 640 | 0.2 | — |
| 480 × 960 | 480 | 960 | 0.46 | — |
| 640 × 1280 | 640 | 1280 | 0.82 | — |
| 720 × 1440 | 720 | 1440 | 1.04 | — |
| 800 × 1600 | 800 | 1600 | 1.28 | — |
| 960 × 1920 | 960 | 1920 | 1.84 | — |
| 1080 × 2160 | 1080 | 2160 | 2.33 | — |
| 1200 × 2400 | 1200 | 2400 | 2.88 | — |
| 1280 × 2560 | 1280 | 2560 | 3.28 | — |
| 1440 × 2880 | 1440 | 2880 | 4.15 | — |
| 1600 × 3200 | 1600 | 3200 | 5.12 | — |
| 1920 × 3840 | 1920 | 3840 | 7.37 | — |
| 2048 × 4096 | 2048 | 4096 | 8.39 | — |
| 2560 × 5120 | 2560 | 5120 | 13.11 | — |
| 3200 × 6400 | 3200 | 6400 | 20.48 | — |
| 3840 × 7680 | 3840 | 7680 | 29.49 | — |
| 5120 × 10240 | 5120 | 10240 | 52.43 | — |
Using 9:18 in CSS
/* Modern — one line */
.box { aspect-ratio: 9 / 18; }
/* With a fixed width */
.box { width: 100%; max-width: 800px; aspect-ratio: 9 / 18; }
/* Legacy padding-top hack, if you still need it */
.box-legacy { position: relative; }
.box-legacy::before { content: ""; display: block; padding-top: 200%; }
.box-legacy > * { position: absolute; inset: 0; }Questions about 9:18
What resolution is 9:18?
9:18 is a ratio, not a fixed resolution — any size where width ÷ height equals 0.5 qualifies. The smallest whole-pixel pair is 1 × 2, and common ones include 640 × 1280, 720 × 1440, 800 × 1600, 960 × 1920.
What is 9:18 used for?
Phones from around 2017 — the first generation of "tall" screens.
How do I set 9:18 in CSS?
Use the aspect-ratio property: aspect-ratio: 9 / 18;. The element then keeps that shape at any width. It is supported in every current browser.
What is 9:18 the other way round?
Rotated to landscape it becomes 2:1 — the same shape, turned 90 degrees.
How do I calculate a 9:18 height from a width?
Multiply the width by 2. For example 1080 × 2 = 2160. The calculator does it both directions.