Surface Duo (1st Gen Dual)
The original Microsoft dual-screen Android device spanned across both panels
Site Headers Restrict Iframes
sends X-Frame-Options or CSP headers blocking iframe embedding.
screen-spanning: single-fold-verticalSurface Duo (1st Gen Dual) Testing FAQs
Common questions about responsive web design on Surface Duo (1st Gen Dual).
What is the viewport resolution of Surface Duo (1st Gen Dual)?
The Surface Duo (1st Gen Dual) has a CSS viewport of 1080px × 1350px at a device pixel ratio of 2.5x. The physical panel resolution is 2700 × 3375 pixels.
How does CSS handle the hinge on Surface Duo (1st Gen Dual)?
When spanned across both screens, content spans the full 1080px width with a central fold. Use CSS media query @media (screen-spanning: single-fold-vertical) and environment variables env(fold-left) and env(fold-width) to offset layout elements away from the seam.
Can I split my layout into two columns for each screen?
Yes. Use CSS Flexbox or Grid with grid-template-columns: 1fr 1fr and add margin around the hinge area (66px for Duo 2) to cleanly separate content onto both displays.