Most Android phones lay out web content at 360 to 412 CSS pixels wide in portrait — 360px is the single most common width, and large phones such as Pixel and Galaxy S Ultra models are around 384–412px. Foldable cover screens can be as narrow as 344px, and tablets start around 600px. Design for 320–430px and test at 360 and 412.
CSS pixels and device pixel ratio
A phone's screen might be 1080 or 1440 physical pixels wide, but the browser divides by its device pixel ratio (DPR) — typically 2.6 to 3.5 on Android — so pages lay out at about 360–412 CSS pixels. Media queries, your layout and the WebView in your app all use CSS pixels. Many phones also let users change "display size", which changes the CSS width.
Size classes worth designing for
| Width (CSS px) | Typical devices | Design note |
|---|---|---|
| 320–359 | Small or older phones, display size set to large | Must not scroll sideways |
| 360 | The most common Android width | Primary design target |
| 384–430 | Large phones | Use extra width for spacing, not more columns |
| 344 (tall) | Foldable cover screens | Very narrow and tall — test it |
| 600–840 | Small tablets, unfolded foldables | Two-column layouts start here |
| 800+ | Tablets | Constrain line length |
These breakpoints follow Android's window size classes (compact under 600, medium 600–840, expanded 840+). Preview any size with the phone frame preview.
Frequently asked questions
What is the most common Android screen width for web design?
360 CSS pixels in portrait. Design at 360 and check 320 and 412.
Should my HTML app support landscape?
Games and slides often lock orientation in the builder. For other apps, make sure nothing breaks on short landscape screens around 360px tall.