Native resolution 1344 × 2992 px at 3× · 486 PPI · 6.8″ · 9:20. Design at 448 × 997 and export assets at 3×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 448 × 997 px |
| CSS viewport (landscape) | 997 × 448 px |
| Native resolution | 1344 × 2992 px |
| Device pixel ratio | 3× |
| Pixel density | 486 PPI |
| Screen diagonal | 6.8 in |
| Panel size | 2.77 × 6.16 in |
| Aspect ratio | 9:20 |
| Total pixels | 4.02 MP |
| Released | 2024 |
| Operating system | Android |
Among the 130 phones on this site, the Google Pixel 9 Pro XL has the 9th largest CSS viewport area. Its 448 px width is 49 px above the 399 px average for this category.
Targeting the Google Pixel 9 Pro XL 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 9 Pro XL specifically */
@media only screen
and (device-width: 448px)
and (device-height: 997px)
and (-webkit-device-pixel-ratio: 3) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 448px) { /* … */ }Compare with other Android Phones models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| Google Pixel 9 Pro XL | 448 × 997 | 1344 × 2992 | 3× | 486 | 6.8″ |
| Samsung Galaxy S24 Ultra | 480 × 1040 | 1440 × 3120 | 3× | 505 | 6.8″ |
| OnePlus 12 | 450 × 990 | 1440 × 3168 | 3.2× | 510 | 6.82″ |
| Xiaomi 14 Ultra | 440 × 979 | 1440 × 3200 | 3.27× | 522 | 6.73″ |
| Samsung Galaxy S24+ | 384 × 832 | 1440 × 3120 | 3.75× | 513 | 6.7″ |
| Samsung Galaxy S24 FE | 360 × 780 | 1080 × 2340 | 3× | 385 | 6.7″ |
| Samsung Galaxy Z Flip 6 | 360 × 880 | 1080 × 2640 | 3× | 425 | 6.7″ |
| Samsung Galaxy A16 | 360 × 780 | 1080 × 2340 | 3× | 385 | 6.7″ |
| Motorola Edge 50 Pro | 412 × 919 | 1220 × 2712 | 2.96× | 446 | 6.7″ |
Questions about the Google Pixel 9 Pro XL screen
What is the screen size of the Google Pixel 9 Pro XL?
The Google Pixel 9 Pro XL has a 6.8-inch display. In CSS the viewport measures 448 × 997 px in portrait, and the panel itself has 1344 × 2992 physical pixels at 486 PPI.
What resolution should I design for on the Google Pixel 9 Pro XL?
Design at 448 × 997 and export assets at 3×. That gives you 1344 × 2992 px images, which is exactly what the panel renders. Designing directly at 1344 × 2992 means every measurement is 3 times larger than the CSS values you will write.
What is the device pixel ratio of the Google Pixel 9 Pro XL?
The Google Pixel 9 Pro XL reports a device pixel ratio of 3. One CSS pixel therefore covers 9 device pixels. You can read it in JavaScript with window.devicePixelRatio.
Which other devices have the same viewport as the Google Pixel 9 Pro XL?
2 other devices share the 448 × 997 CSS viewport: Google Pixel 10 Pro XL, Google Pixel 8 Pro. A layout that works on one works on all of them.
Related
window.innerWidth/innerHeight reported by the stock browser with no browser chrome. See methodology and sources.