Native resolution 1280 × 800 px at 1× · 204 PPI · 7.4″ · 16:10. Design at 1280 × 800 and export assets at 1×.
| Property | Value |
|---|---|
| CSS viewport (portrait) | 1280 × 800 px |
| CSS viewport (landscape) | 800 × 1280 px |
| Native resolution | 1280 × 800 px |
| Device pixel ratio | 1× |
| Pixel density | 204 PPI |
| Screen diagonal | 7.4 in |
| Panel size | 6.27 × 3.92 in |
| Aspect ratio | 16:10 |
| Total pixels | 1.02 MP |
| Released | 2023 |
| Operating system | various |
Among the 17 handhelds on this site, the Steam Deck OLED has the 13th largest CSS viewport area. Its 1280 px width is 267 px below the 1547 px average for this category.
Targeting the Steam Deck OLED 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 Steam Deck OLED specifically */
@media only screen
and (device-width: 1280px)
and (device-height: 800px)
and (-webkit-device-pixel-ratio: 1) {
/* … */
}
/* More useful in practice — the width bucket it falls into */
@media (min-width: 1280px) { /* … */ }Compare with other Handhelds & E-Readers models
| Device | CSS viewport | Native | DPR | PPI | Diagonal |
|---|---|---|---|---|---|
| Steam Deck OLED | 1280 × 800 | 1280 × 800 | 1× | 204 | 7.4″ |
| ASUS ROG Ally | 1920 × 1080 | 1920 × 1080 | 1× | 315 | 7″ |
| Lenovo Legion Go | 2560 × 1600 | 2560 × 1600 | 1× | 343 | 8.8″ |
| Steam Deck LCD | 1280 × 800 | 1280 × 800 | 1× | 216 | 7″ |
| ASUS ROG Ally X | 1920 × 1080 | 1920 × 1080 | 1× | 315 | 7″ |
| Kindle Paperwhite 12 | 1264 × 1680 | 1264 × 1680 | 1× | 300 | 7″ |
| Kobo Libra Colour | 1264 × 1680 | 1264 × 1680 | 1× | 300 | 7″ |
| Kobo Clara Colour | 1072 × 1448 | 1072 × 1448 | 1× | 300 | 6″ |
| Kindle Scribe | 1860 × 2480 | 1860 × 2480 | 1× | 300 | 10.2″ |
Questions about the Steam Deck OLED screen
What is the screen size of the Steam Deck OLED?
The Steam Deck OLED has a 7.4-inch display. In CSS the viewport measures 1280 × 800 px in portrait, and the panel itself has 1280 × 800 physical pixels at 204 PPI.
What resolution should I design for on the Steam Deck OLED?
Design at 1280 × 800 and export assets at 1×. That gives you 1280 × 800 px images, which is exactly what the panel renders. Designing directly at 1280 × 800 means every measurement is 1 times larger than the CSS values you will write.
What is the device pixel ratio of the Steam Deck OLED?
The Steam Deck OLED reports a device pixel ratio of 1. One CSS pixel therefore covers one device pixel. You can read it in JavaScript with window.devicePixelRatio.
Which other devices have the same viewport as the Steam Deck OLED?
5 other devices share the 1280 × 800 CSS viewport: Dell XPS 13 (9350), Dell XPS 13 Plus, ThinkPad X1 Carbon Gen 12, ASUS Zenbook 14 OLED, Steam Deck LCD. 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.