Microsoft Surface Responsiveness Tester
Test dual-screen Surface Duo spanning, 66px hinge gaps, and Surface Pro 3:2 viewports. Select a device from the sidebar to start testing.
Surface Duo 2 (Dual)
8.3" Dual AMOLED 90Hz with 66px Hinge
Surface Duo 2 (Single)
5.8" AMOLED 13:9 Aspect Ratio
Surface Duo (1st Gen Dual)
8.1" Dual 5.6" AMOLED with 360° Hinge
Surface Duo (1st Gen Single)
5.6" AMOLED 4:3 Aspect Ratio
Surface Pro 11
13" PixelSense Flow OLED 120Hz 3:2
Surface Pro 9
13" PixelSense Flow LCD 120Hz 3:2
Surface Laptop Studio 2
14.4" PixelSense Flow Touchscreen 120Hz
Surface Go 4
10.5" PixelSense Touch Display 3:2
Microsoft Surface Responsive Design FAQs
Key considerations for testing dual-screen and 3:2 Surface displays.
How do I test CSS dual-screen features on Surface Duo?
The Surface Duo dual-screen spanned mode uses CSS Screen Fold APIs and environment variables: @media (screen-spanning: single-fold-vertical) and env(fold-left), env(fold-width: 66px). Select Surface Duo 2 (Dual) from the sidebar to inspect your layout across the hinge.
What is the hinge gap width on Surface Duo 2?
Surface Duo 2 has a physical hinge gap of 66px between the two 5.8" screens. When an app spans across both screens, content placed directly in the center can be obscured unless adapted using CSS fold variables.
Why do Surface Pro tablets use a 3:2 aspect ratio?
Microsoft Surface tablets utilize a 3:2 aspect ratio (e.g. 912×1368 CSS viewport on Surface Pro 11 and Pro 9), providing 18% more vertical screen real estate than standard 16:9 displays. This makes them ideal for productivity and document reading.
Can I test standard single-screen viewports for Surface Duo?
Yes! We provide single-screen modes for both Surface Duo 2 (672×1892px) and Surface Duo 1 (540×1350px) so you can test both folded/single-screen and dual-screen orientations.