Microsoft Surface Pro 13″ (11th/12th Ed.) viewport size
960 × 1440CSS px · 2× DPR · 1920×2880 physical
The Microsoft Surface Pro 13″ (11th/12th Ed.) gives web pages a 960 × 1440 CSS pixel viewport in portrait. That’s the width your layout and media queries actually see, not the 1920 × 2880 physical pixels of the screen: with a device pixel ratio of 2, every CSS pixel is 2 × 2 real pixels.
See your site on a Microsoft Surface Pro 13″ (11th/12th Ed.)
Paste your address (or localhost:3000). doesitfit shows it at exactly 960 × 1440, 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 960 × 1440, but the browser’s own bars take some of it. In Chrome (Windows 11) a page gets about 960 × 1305 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) | 960px | 1440px |
| Visible on first load (Chrome (Windows 11)) | 960px | 1305px |
| Landscape (full) | 1440px | 960px |
What it means for your CSS
Breakpoints
At 960px: Tailwind uses md (sm: md: styles apply); Bootstrap uses md. In landscape (1440px): Tailwind uses xl (sm: md: lg: xl: styles apply), Bootstrap xxl.
Content width
With 16px of padding on each side your text column is 928px; with 24px it’s 912px. Text closer than 8px to the edge looks cramped (more).
Sharp images
A full-width image needs about 1920px of real pixels (960 × 2).
<img src="hero-1920.jpg" srcset="hero-800.jpg 800w, hero-1920.jpg 1920w" sizes="100vw" alt="…">
Styles for this width
Content-first breakpoints beat device lists, but if something breaks at this width:
@media (max-width: 960px) {
/* screens 960px wide and narrower */
}Other display size settings
The scaling the owner picks changes the viewport your site gets:
| Setting | CSS viewport | DPR |
|---|---|---|
| Default 200% (default) | 960 × 1440 | 2 |
| 175% | 1098 × 1646 | 1.75 |
| 150% | 1280 × 1920 | 1.5 |
How common is 960 × 1440?
960 × 1440 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 960 × 1440 viewport · All Android & Windows tablets sizes
Questions people ask
What is the viewport size of the Microsoft Surface Pro 13″ (11th/12th Ed.)?
960 × 1440 CSS pixels in portrait (1440 × 960 in landscape), with a device pixel ratio of 2. The screen itself is 1920 × 2880 physical pixels.
How much of the Microsoft Surface Pro 13″ (11th/12th Ed.) screen does a web page get in Chrome?
About 960 × 1305 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 1440px.
Which CSS breakpoint does the Microsoft Surface Pro 13″ (11th/12th Ed.) fall into?
At 960px wide, Tailwind CSS uses md (sm: md: styles apply) and Bootstrap uses its md tier. In landscape (1440px) Tailwind uses xl (sm: md: lg: xl: styles apply).
How wide should images be for the Microsoft Surface Pro 13″ (11th/12th Ed.)?
A full-width image needs about 1920px of real pixels (960 CSS px × DPR 2) to look sharp. Use srcset so smaller screens don’t download it.
How can I test my website on a Microsoft Surface Pro 13″ (11th/12th Ed.) without one?
Open doesitfit.lol, paste your address (localhost works too) and pick the Microsoft Surface Pro 13″ (11th/12th Ed.). It shows your site at exactly 960 × 1440 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 (1440 × 960). 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.