So nutzt du CSS für Foldables und Dual-Screen-Geräte
Designing for Dual Screen and Foldable Devices with CSS (2023)
Mit dem Pixel Fold rücken faltbare Geräte in den Fokus. Stephanie Stimac zeigt, wie CSS-Media-Queries wie horizontal-viewport-segments und Environment-Variablen wie env(viewport-segment-width) Layouts ermöglichen, die sich an die zwei Bildschirme anpassen. Ein Rezept-Demo wechselt automatisch zu einem zweispaltigen Raster. Obwohl Foldables 2023 nur einen kleinen Teil des Markts ausmachen, bieten sie eine Chance, sich abzuheben. Die Unterstützung in Microsoft Edge ist bereits vorhanden, Chrome hinkt hinterher.
Wenn du immer noch daran interessiert bist, zu erkunden, was mit Dual-Screen-Layouts möglich ist, habe ich einen viel ausführlicheren Artikel drüben bei Smashing Magazine, der das Rezept-Demo durchgeht, das ich für das Web erstellt habe.