Was es ist
CSS (der Style-Code, der bestimmt, wie eine Seite aussieht) kann Elemente entweder mit festen Einheiten wie Pixeln (eine Box, die genau auf 800 Pixel Breite gesetzt ist, zum Beispiel) oder mit relativen, flexiblen Einheiten wie Prozentangaben skalieren, die sich automatisch an den jeweiligen Bildschirm anpassen, auf dem die Seite angezeigt wird. Ein „Element mit fester Breite" ist jeder Teil einer Seite – ein Bild, eine Tabelle, eine Container-Box – der mit einem solchen festen Pixelwert statt mit einem flexiblen skaliert ist.
Das funktioniert problemlos, solange der Bildschirm breiter ist als dieser feste Wert. Sobald der tatsächliche Bildschirm (insbesondere ein Handy) aber schmaler ist als die feste Breite des Elements, bleibt dem Browser keine andere Wahl, als die Seite seitlich scrollen zu lassen, um es unterzubringen – er kann ein Element nicht unter seine ausdrücklich festgelegte Größe schrumpfen.
Warum es wichtig ist
Seitliches Scrollen gehört zu den auffälligsten, unverkennbarsten Anzeichen eines kaputten mobilen Layouts, weil es Besucher zwingt, gleichzeitig in zwei Richtungen zu scrollen, nur um normal zu lesen – ein völlig anderes, frustrierenderes Verhalten als das gewohnte Auf-und-ab-Scrollen. Meist reicht schon ein einziges überdimensioniertes Element irgendwo auf der Seite (ein breites Bild, eine eingebettete Tabelle, eine Box mit fester Breite), um dieses Verhalten für die gesamte Seite zu erzwingen, nicht nur rund um dieses eine Element.
Das ist oft ein Überbleibsel aus Inhalten, die ursprünglich für den Desktop gedacht waren – eine aus einer Tabellenkalkulation kopierte Tabelle, ein Bild, das in seinen ursprünglichen, unkomprimierten Pixelmaßen eingefügt wurde – und kein grundsätzlicher Fehler im Gesamtdesign der Website.
So behebst du es
- Öffne deine Website auf dem Handy (oder in einem schmalen Browserfenster) und prüfe, ob die ganze Seite seitwärts scrollt oder finde den konkreten Bereich, wo es anfängt.
- Suche das konkrete Element, das den Überlauf verursacht – oft ein breites Bild, eine eingebettete Tabelle oder eine Box mit fest gesetzter Pixelbreite im Styling.
- Ersetze feste Pixelbreiten durch relative Einheiten wie Prozentangaben, oder füge eine
max-width: 100%-Regel hinzu, damit das Element nie breiter als der tatsächliche Bildschirm werden kann. - Bei breiten Tabellen speziell: Erwäge, sie in einen scrollbaren Container einzupacken, der nur auf diese eine Tabelle begrenzt ist, statt die ganze Seite seitlich scrollen zu lassen.
- Prüfe nach jeder Änderung erneut auf dem Handy, ob das seitliche Scrollen verschwunden ist.