Native resolution 1280 × 800 px at 1× · 216 PPI · 7″ · 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 | 216 PPI |
| Screen diagonal | 7 in |
| Panel size | 5.93 × 3.7 in |
| Aspect ratio | 16:10 |
| Total pixels | 1.02 MP |
| Released | 2022 |
| Operating system | various |
Among the 17 handhelds on this site, the Steam Deck LCD has the 14th largest CSS viewport area. Its 1280 px width is 267 px below the 1547 px average for this category.
Targeting the Steam Deck LCD 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 LCD 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 LCD | 1280 × 800 | 1280 × 800 | 1× | 216 | 7″ |
| Kindle Scribe | 1860 × 2480 | 1860 × 2480 | 1× | 300 | 10.2″ |
| Nintendo Switch OLED | 1280 × 720 | 1280 × 720 | 1× | 210 | 7″ |
| ASUS ROG Ally | 1920 × 1080 | 1920 × 1080 | 1× | 315 | 7″ |
| Kindle Paperwhite 11 | 1236 × 1648 | 1236 × 1648 | 1× | 300 | 6.8″ |
| Steam Deck OLED | 1280 × 800 | 1280 × 800 | 1× | 204 | 7.4″ |
| Lenovo Legion Go | 2560 × 1600 | 2560 × 1600 | 1× | 343 | 8.8″ |
| ASUS ROG Ally X | 1920 × 1080 | 1920 × 1080 | 1× | 315 | 7″ |
| Kindle Paperwhite 12 | 1264 × 1680 | 1264 × 1680 | 1× | 300 | 7″ |
Questions about the Steam Deck LCD screen
What is the screen size of the Steam Deck LCD?
The Steam Deck LCD has a 7-inch display. In CSS the viewport measures 1280 × 800 px in portrait, and the panel itself has 1280 × 800 physical pixels at 216 PPI.
What resolution should I design for on the Steam Deck LCD?
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 LCD?
The Steam Deck LCD 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 LCD?
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 OLED. 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.