Microsoft Surface Pro 12″ viewport size
976 × 1464CSS px · 1.5× DPR · 1464×2196 physical
The Microsoft Surface Pro 12″ gives web pages a 976 × 1464 CSS pixel viewport in portrait. That’s the width your layout and media queries actually see, not the 1464 × 2196 physical pixels of the screen: with a device pixel ratio of 1.5, every CSS pixel is 1.5 × 1.5 real pixels.
See your site on a Microsoft Surface Pro 12″
Paste your address (or localhost:3000). doesitfit shows it at exactly 976 × 1464, with Chrome (Windows 11)’s bars if you want them, and tells you if anything spills.
Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.
What a web page actually sees
The full viewport is 976 × 1464, but the browser’s own bars take some of it. In Chrome (Windows 11) a page gets about 976 × 1329 on first load (Chrome’s 87px tab strip + toolbar and the 48px Windows 11 taskbar, maximized window). That’s your real “above the fold”.
| Setting | Width | Height |
|---|---|---|
| Full viewport (portrait) | 976px | 1464px |
| Visible on first load (Chrome (Windows 11)) | 976px | 1329px |
| Landscape (full) | 1464px | 976px |
What it means for your CSS
Breakpoints
At 976px: Tailwind uses md (sm: md: styles apply); Bootstrap uses md. In landscape (1464px): Tailwind uses xl (sm: md: lg: xl: styles apply), Bootstrap xxl.
Content width
With 16px of padding on each side your text column is 944px; with 24px it’s 928px. Text closer than 8px to the edge looks cramped (more).
Sharp images
A full-width image needs about 1464px of real pixels (976 × 1.5).
<img src="hero-1464.jpg" srcset="hero-800.jpg 800w, hero-1464.jpg 1464w" sizes="100vw" alt="…">
Styles for this width
Content-first breakpoints beat device lists, but if something breaks at this width:
@media (max-width: 976px) {
/* screens 976px wide and narrower */
}Other display size settings
The scaling the owner picks changes the viewport your site gets:
| Setting | CSS viewport | DPR |
|---|---|---|
| Default 150% (default) | 976 × 1464 | 1.5 |
| 125% | 1172 × 1757 | 1.25 |
| 175% | 837 × 1255 | 1.75 |
How common is 976 × 1464?
976 × 1464 isn’t in StatCounter’s top lists for Aug 2026 on its own, but nearby sizes behave the same way. See the most common screen sizes.
Everything about the 976 × 1464 viewport · All Android & Windows tablets sizes
Questions people ask
What is the viewport size of the Microsoft Surface Pro 12″?
976 × 1464 CSS pixels in portrait (1464 × 976 in landscape), with a device pixel ratio of 1.5. The screen itself is 1464 × 2196 physical pixels.
How much of the Microsoft Surface Pro 12″ screen does a web page get in Chrome?
About 976 × 1329 on first load: the Chrome’s 87px tab strip + toolbar and the 48px Windows 11 taskbar, maximized window. Design your first screen for that height, not the full 1464px.
Which CSS breakpoint does the Microsoft Surface Pro 12″ fall into?
At 976px wide, Tailwind CSS uses md (sm: md: styles apply) and Bootstrap uses its md tier. In landscape (1464px) Tailwind uses xl (sm: md: lg: xl: styles apply).
How wide should images be for the Microsoft Surface Pro 12″?
A full-width image needs about 1464px of real pixels (976 CSS px × DPR 1.5) to look sharp. Use srcset so smaller screens don’t download it.
How can I test my website on a Microsoft Surface Pro 12″ without one?
Open doesitfit.lol, paste your address (localhost works too) and pick the Microsoft Surface Pro 12″. It shows your site at exactly 976 × 1464 CSS pixels and flags anything that spills past the edge.
Guides that help
- Responsive breakpoints in 2026 — the widths that matterWhere 123 real phones, tablets, laptops and monitors land in CSS pixels, which responsive breakpoints actually matter in 2026, and which screens to test.Guides · 8 min read
- Tailwind breakpoints on real devices, from sm to 2xlWhich real phones, tablets, laptops and monitors land in Tailwind's sm, md, lg, xl and 2xl breakpoints, upright and sideways, plus the gotchas that bite.Guides · 8 min read
- What is a viewport? CSS pixels vs screen resolutionA viewport is the area your page is laid out in, measured in CSS pixels, not screen pixels. See real numbers from iPhones and MacBooks, then check yours.Guides · 8 min read
About these numbers
Confidence: High: confirmed by more than one independent source. Usually used in landscape (1464 × 976). Windows picks a “recommended” scale per panel and manufacturers often override it; Chrome rounds fractional sizes up (2560×1600 at 150% → 1707×1067).
Sources include DeviceAtlas, Chrome DevTools device list (EmulatedDevices.ts), iosref.com, ios-resolution.com. Researched September 2026.