Tablet
Surface Pro 10 viewport size
The Surface Pro 10 has a viewport of 960 × 1440 CSS pixels and a device pixel ratio of 2, which makes about 1920 × 2880 physical pixels.
Viewport (portrait)
960 × 1440
Landscape
1440 × 960
Device pixel ratio
2
Screen resolution
1920 × 2880
Screenshot a website on the Surface Pro 10
CSS for the Surface Pro 10
Target this screen size in CSS (portrait):
@media (max-width: 960px) {
/* Surface Pro 10 and smaller */
}
@media (min-resolution: 2dppx) {
/* high-density screens: serve sharper images */
}Design for ranges, not single devices: many phones share the same viewport width (for example 960 px).
User agent
The user agent Chrome DevTools uses when it emulates the Surface Pro 10:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/<version> Safari/537.36Chrome inserts its own version number for <version>.
Test your site on the Surface Pro 10
In Chrome, open DevTools (F12), turn on device mode (Ctrl+Shift+M or ⌘+Shift+M) and pick the device from the Dimensions menu, or use the screenshot tool above to capture any page at this size.
Data from the device list built into Chrome DevTools (devtools-frontend, BSD license).
Frequently asked questions
What is the viewport size of the Surface Pro 10?
What is the screen resolution of the Surface Pro 10?
Why is the viewport smaller than the screen resolution?
Other devices
Screenshot API
Take screenshots from your code
screenshotbase renders any website in a real browser and returns the image: full page or viewport, any device size, retina, from 100+ countries, with cookie banners and ads hidden.
Read the docs300 free screenshots every month. No credit card required.
GET https://api.screenshotbase.com/v1/take?url=https://example.com&viewport_width=960&viewport_height=1440&device_scale_factor=2
# Response: the image (PNG, JPG, WebP or GIF)
curl -G "https://api.screenshotbase.com/v1/take" \
--data-urlencode "url=https://example.com" \
-d viewport_width=1280 -d viewport_height=800 \
-d format=png \
-H "apikey: YOUR-API-KEY" \
-o screenshot.png