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.
- socalgal2
Ich bin mir nicht sicher, ob mich das überzeugt.
Wenn das Aufteilen der UI nützlich ist, dann sollte man mich doch einfach selbst entscheiden lassen, sie aufzuteilen, sogar auf einem einzelnen Display, anstatt das für mich zu entscheiden. Mein Laptop hat ein Display-Seitenverhältnis ähnlich dem eines aufgeklappten Falt-Handys. Wenn es also nützlich ist, jede Hälfte des Displays in zwei Bereiche aufzuteilen, dann sollte das unabhängig vom Gerät nützlich sein.
Persönlich: Wenn ich mir ein Falt-Handy kaufen würde, dann wahrscheinlich genau deshalb, weil ich ein größeres Display für bestehende Inhalte will. Ich will nicht, dass deine App für mich entscheidet und es wie zwei Displays behandelt. Stell dir vor, in vi oder emacs würden automatisch Bereiche basierend auf deinem Seitenverhältnis aufgeteilt, wie im Artikel gezeigt. Nein, bitte nicht! Lasst mich entscheiden, wann ich es aufgeteilt haben will.
- ChiperSoft
Und natürlich unterstützt Safari das noch nicht in den Tech Previews.
- DarmokTanagra
Apples Duo-Screen-UX geht davon aus, dass der gesamte Planet rechtshändig ist.
Das neue Duo weist dieselben UX-Versäumnisse auf wie die Apple Mouse.