Twitter/X verwendet verschiedene Zuschneidebereiche für dasselbe Header-Bild je nach Gerät. Ein Header, der auf dem Desktop perfekt aussieht, kann auf dem Mobilgerät den Text abschneiden. Das ist kein Bug — so funktioniert Twitters responsives Design. Das Zuschneideverhalten zu verstehen ist der erste Schritt für einen Header, der überall gut aussieht.
Drei Zuschneidezonen, die Sie kennen müssen:
- Desktop (voller Browser): Zeigt den vollständigen 1500×500px Header. Kein Zuschnitt.
- Mobil-App (Hochformat): Schneidet auf ca. 600×200px in der Mitte zu. Nur 40% der Breite und 40% der Höhe.
- iPad / Tablet: Zeigt ca. die Mitte 1000×350px.
Lösung: Mobile First designen. Platzieren Sie alle kritischen Inhalte — Text, Gesichter, Logos — im zentralen 600×200px Bereich Ihres 1500×500 Canvas.