Samsung Galaxy Z Fold 7: Screen Size & CSS Viewport

The Galaxy Z Fold 7 presents the most complex responsive testing challenge of any phone: a single device with two completely different viewports. In its folded cover state it behaves like a tall, narrow phone of about 412×960 (21:9 ratio). When unfolded it expands to a near-square viewport of roughly 984×1092, a ratio unlike any other mainstream device.

The cover screen at about 412×960 falls within standard mobile phone dimensions and should be handled by your regular mobile media queries. But the unfolded viewport of roughly 984×1092 is genuinely unusual: it is wider than most tablet portrait modes (820px) yet almost square, and it lands just below the common 1024px desktop breakpoint. Content that assumes a portrait tablet may feel stretched, while content that uses horizontal tabs or side-by-side layouts may shine.

At 4.2 mm the Fold 7 is the thinnest foldable phone ever made, making it increasingly pocket-friendly and mainstream. As foldable adoption grows, your responsive layouts must handle graceful transitions between the two viewport states. If you use CSS environment variables for safe area insets, verify they apply correctly in both states — the hinge creates a physical gap that affects how content in the center of the unfolded screen should be positioned.