Surface Pro 9 screen size
The Surface Pro 9 renders websites at 912×1368 CSS pixels in portrait and 1368×912 in landscape.
Viewport specs
| CSS viewport (portrait) | 912 × 1368 px |
| CSS viewport (landscape) | 1368 × 912 px |
| Aspect ratio | 2:3 |
| Breakpoint category | tablet |
| Device type | tablet |
| Brand | Tablets |
CSS media query for Surface Pro 9
/* Surface Pro 9 — portrait */
@media (max-width: 912px) {
/* your styles */
}
/* Surface Pro 9 — landscape */
@media (max-width: 1368px) and (orientation: landscape) {
/* your styles */
}Testing tips for Surface Pro 9
Viewports this wide are where layouts most often break: check that nothing scrolls sideways, buttons are at least 44px tall, and body text is 16px or larger.
Compare it against a tablet and a desktop width in the same view to catch breakpoint jumps — Responsivly's multi-view does this in one click.
FAQ
What is the Surface Pro 9 viewport size?
The Surface Pro 9 has a CSS viewport of 912×1368 pixels in portrait orientation and 1368×912 pixels in landscape.
What media query targets the Surface Pro 9?
Use @media (max-width: 912px) for portrait styles, or @media (min-width: 912px) and (max-width: 912px) to target this exact width.
How do I test my website on the Surface Pro 9?
Open Responsivly, paste your URL and pick Surface Pro 9 from the device list — it renders your site at 912×1368 for free, no signup.