Native resolution 1080 × 2280 px at 2.75× · 444 PPI · 5.7″ · 9:19. Design at 393 × 829 and export assets at 2.75×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 393 × 829 px |
| CSS viewport (landscape) | 829 × 393 px |
| Native resolution | 1080 × 2280 px |
| Device pixel ratio | 2.75× |
| Pixel density | 444 PPI |
| Screen diagonal | 5.7 in |
| Panel size | 2.43 × 5.14 in |
| Aspect ratio | 9:19 (exact 9:19) |
| Total pixels | 2.46 MP |
| Released | 2019 |
| Operating system | Android |
Among the 130 phones on this site, the Google Pixel 4 has the 76th largest CSS viewport area. Its 393 px width is 6 px below the 399 px average for this category.
Targeting the Google Pixel 4 in CSS
Device-specific media queries are brittle — a new model with the same width will not match. Use them for genuine per-device fixes only, and prefer width buckets for layout.
/* Target Google Pixel 4 specifically */
@media only screen
and (device-width: 393px)
and (device-height: 829px)
and (-webkit-device-pixel-ratio: 2.75) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 393px) { /* … */ }Compare with other Android Phones models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| Google Pixel 4 | 393 × 829 | 1080 × 2280 | 2.75× | 444 | 5.7″ |
| Samsung Galaxy S10 | 360 × 760 | 1440 × 3040 | 4× | 550 | 6.1″ |
| Samsung Galaxy S10+ | 360 × 760 | 1440 × 3040 | 4× | 522 | 6.4″ |
| Samsung Galaxy S9 | 360 × 740 | 1440 × 2960 | 4× | 570 | 5.8″ |
| Google Pixel 4a | 393 × 851 | 1080 × 2340 | 2.75× | 443 | 5.81″ |
| Google Pixel 5 | 393 × 851 | 1080 × 2340 | 2.75× | 432 | 6″ |
| Samsung Galaxy S20 | 360 × 800 | 1440 × 3200 | 4× | 563 | 6.2″ |
| Samsung Galaxy S20 Ultra | 412 × 914 | 1440 × 3200 | 3.5× | 511 | 6.9″ |
| Samsung Galaxy Note 20 Ultra | 412 × 883 | 1440 × 3088 | 3.5× | 496 | 6.9″ |
Questions about the Google Pixel 4 screen
What is the screen size of the Google Pixel 4?
The Google Pixel 4 has a 5.7-inch display. In CSS the viewport measures 393 × 829 px in portrait, and the panel itself has 1080 × 2280 physical pixels at 444 PPI.
What resolution should I design for on the Google Pixel 4?
Design at 393 × 829 and export assets at 2.75×. That gives you 1080 × 2280 px images, which is exactly what the panel renders. Designing directly at 1080 × 2280 means every measurement is 2.75 times larger than the CSS values you will write.
What is the device pixel ratio of the Google Pixel 4?
The Google Pixel 4 reports a device pixel ratio of 2.75. One CSS pixel therefore covers 7.56 device pixels. You can read it in JavaScript with window.devicePixelRatio.
Related
window.innerWidth/innerHeight reported by the stock browser with no browser chrome. See methodology and sources.