Testing Websites on Foldable Devices
How foldables change responsive assumptions, the viewport widths they introduce, and how to keep layouts working across the fold.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Foldables break the phone/tablet binary
A foldable is a narrow phone when closed and a small tablet when open, sometimes switching mid-session. That introduces unusual widths and aspect ratios your breakpoints may not anticipate, plus the possibility of content landing under the hinge. If your layout only knows 'phone' and 'tablet', a foldable will expose the gap.
Closed state is a narrow phone, often around 280-360px
Open state behaves like a small tablet, ~600-840px
Aspect ratios can be unusually tall or nearly square
Content can fall awkwardly across the hinge
Design for the range, not the device
Chasing specific foldable models is futile. Instead, make sure your layout works across the entire width range continuously, with no dead zones where the design assumes a fixed size. Fluid grids, flexible typography, and content-driven breakpoints handle foldables naturally. The CSS viewport-segments and screen-spanning features can refine the hinge case where supported.
Ensure continuous layout across the full width range
Avoid fixed widths that assume a specific device
Use fluid grids and clamp-based typography
Consider viewport-segment media features for the hinge
Test the narrow and open extremes
The fastest check is to view the closed (very narrow) and open (small-tablet) widths together and scrub between them. Sizzy lets you add custom-width devices for both foldable states and interact with them in sync, so you confirm the layout survives the fold without owning a foldable phone.
Add a very narrow custom device for the closed state
Add a small-tablet width for the open state
Scrub the range between to find dead zones
Confirm no critical content lands under the hinge
Release checklist
Layout works continuously across the full width range.
No fixed widths assume a single device size.
Closed and open foldable widths are both tested.
Critical content avoids the hinge region.
Frequently asked questions
What viewport widths do foldables use?
Closed, foldables behave like narrow phones around 280-360px; open, they act like small tablets around 600-840px. Exact values vary by model, so design for the continuous range rather than specific widths.
How do I handle the fold or hinge in CSS?
Where supported, the viewport-segments and screen-spanning media features let you detect the hinge and avoid placing critical content across it. Otherwise, fluid layouts that work across the full width range handle foldables well.
Do I need a foldable to test for foldables?
No. Testing the narrow closed width and the wider open width with custom device profiles in a multi-device browser catches most foldable issues. A real foldable is only needed for final validation of hinge-specific behavior.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.