Die Website sieht auf dem Handy fehlerhaft aus, auf dem Computer normal: Warum?

29 Ağustos 2026

Eine Website kann auf dem Computer tadellos aussehen und beim Öffnen auf dem Handy auseinanderfallen: Texte laufen aus ihrem Kasten, Bilder ragen über den Bildschirm hinaus, das Menü öffnet sich nicht, Schaltflächen lassen sich mit dem Finger nur schwer treffen, die Seite verschiebt sich nach links und rechts, Bereiche überlappen sich. Das liegt nicht daran, dass das Handy „defekt” ist, sondern daran, dass die Website nicht so gestaltet wurde, dass sie sich an den kleinen Bildschirm anpasst. Das Problem heißt fehlendes responsive Design (anpassungsfähiges Design). In diesem Beitrag behandeln wir der Reihe nach die Symptome, die Ursachen und die Lösungen.

Das Thema ist nicht nur ein ästhetischer Mangel. Heute stammt ein erheblicher Teil des Web-Traffics von Handys und Tablets; viele Besucher öffnen eine Website zum ersten Mal auf dem Mobiltelefon. Eine Seite, die auf dem Handy verrutscht, überläuft und schwer bedienbar ist, führt dazu, dass der Besucher die Website sofort verlässt und einen negativen Eindruck vom Unternehmen gewinnt. Deshalb ist die mobile Anpassung auch ein grundlegendes Kriterium, das bei der Bewertung durch Suchmaschinen berücksichtigt wird.

Symptome: Was genau geht auf dem Handy kaputt?

Der Desktop-Bildschirm ist breit und bietet viel Platz in der Horizontalen; der Handy-Bildschirm hingegen ist schmal, vertikal und berührungsempfindlich. Wenn eine für einen breiten Bildschirm ausgelegte Seite versucht, sich in einen schmalen Bildschirm einzupassen, gerät ihr Layout durcheinander und es treten typische Symptome auf:

• Texte laufen aus ihrem Kasten heraus oder werden unlesbar klein.
• Bilder überschreiten die Bildschirmbreite, ihre rechte Seite wird abgeschnitten.
• Die Seite verschiebt sich horizontal; der Nutzer muss nach rechts scrollen.
• Das Menü öffnet sich nicht oder die Links verschachteln sich ineinander.
• Weil die Schaltflächen zu nah beieinander liegen, wird es schwer, mit dem Finger die richtige zu treffen.
• Nebeneinander angeordnete Bereiche überlappen sich.

Ursache: feste Maße und fehlende Einstellungen

Die meisten Probleme entstehen dadurch, dass die Seite mit festen Maßen gemäß der Desktop-Breite aufgebaut ist. Wenn das Design nur für eine einzige Bildschirmbreite ausgelegt ist, passen die Elemente auf jedem schmaleren Bildschirm nicht mehr an ihren Platz. Die häufigsten Ursachen sind:

• Feste px-Breiten: Wenn einem Bereich eine feste Breite wie width: 1200px gegeben wird, passt dieser Bereich auf einem 380 Pixel breiten Handy nicht auf den Bildschirm und verursacht horizontales Verschieben.
• Fehlen des viewport-Meta-Tags: Wenn im head-Bereich der Seite kein viewport-Meta-Tag vorhanden ist, öffnet das Handy die Seite in Desktop-Breite und versucht, sie zu verkleinern; alles erscheint winzig und verschoben.
• Bilder ohne max-width: Wird für ein Bild keine Obergrenze festgelegt, öffnet es sich in Originalgröße und überschreitet den schmalen Bildschirm.
• Das mobile Layout wurde gar nicht bedacht: Das Design wurde nur für den breiten Bildschirm gemacht, wie die Elemente auf einem kleinen Bildschirm angeordnet werden sollen, ist nicht definiert.

Lösung: fließendes und anpassungsfähiges Layout

Die Lösung besteht darin, die Seite nicht mit festen Maßen aufzubauen, sondern so, dass sie sich fließend entsprechend der Bildschirmbreite verhält. Bei diesem Ansatz ist das Design nicht auf eine einzige Breite festgelegt; die Elemente werden entsprechend der Bildschirmgröße neu angeordnet, Spalten rutschen untereinander, Text und Abstände werden proportional eingestellt. Die grundlegenden anzuwendenden Ansätze:

• viewport-Meta-Tag: Dem head-Bereich der Seite wird ein viewport-Meta-Tag mit dem Wert width=device-width, initial-scale=1 hinzugefügt. Dies sorgt dafür, dass das Handy die Seite in ihrer tatsächlichen Breite anzeigt; es ist die erste Voraussetzung für responsive Design.
• Relative Einheiten: Statt fester px werden relative Einheiten wie Prozent, rem, vw verwendet; die Elemente wachsen und schrumpfen proportional zur Bildschirmbreite.
• Flexbox und grid: Bereiche werden mit den CSS-Layouts flexbox und grid platziert; auf einem schmalen Bildschirm können nebeneinander stehende Elemente automatisch untereinander rutschen.
• Media queries: Mit Media queries werden unterhalb bestimmter Bildschirmbreiten abweichende Regeln definiert; zum Beispiel wird das Menü auf dem Handy zu einer Hamburger-Schaltfläche und die Spaltenzahl verringert sich.
• max-width bei Bildern: Bildern wird max-width: 100% gegeben; so kann ein Bild niemals breiter als sein Container werden und läuft nicht über den Bildschirm hinaus.

Bedienung per Touch und Vermeidung des horizontalen Verschiebens

Auf dem Handy bedeutet Design nicht nur „hineinpassen”, sondern eine bequeme Bedienung mit dem Finger. Während der Mauszeiger präzise und kleine Ziele treffen kann, ist der Finger größer und weniger genau; deshalb kann ein Layout, das auf dem Desktop problemlos aussieht, per Touch unbrauchbar sein. Dafür wird zusätzlich auf einige Punkte geachtet:

• Ausreichende Schaltflächengröße: Berührbare Elemente werden groß genug, um leicht mit dem Finger getroffen zu werden, und mit ausreichendem Abstand zueinander platziert; das Treffen des falschen Elements wird verhindert.
• Horizontales Verschieben unterbinden: Der Seitenkörper darf niemals horizontales Scrollen erzeugen. Breite Inhalte (Tabellen, Codeblöcke, breite Bilder) werden in eigene, in sich scrollbare Kästen gelegt.
• Lesbare Schriftgröße: Der Text wird in einer Größe gehalten, die auf dem Handy kein Heranzoomen erfordert.

Um sicherzustellen, dass eine Website auf dem Handy korrekt funktioniert, muss man sie auf echten Geräten oder mit der Gerätesimulation in den Entwicklerwerkzeugen des Browsers testen. Wichtig ist, nicht nur ein Handymodell, sondern verschiedene Bildschirmbreiten zu betrachten; denn zwischen einem kleinen Handy und einem großen Tablet wird erwartet, dass sich das Layout fließend verändert. Zu versuchen, die Seite nach links und rechts zu scrollen, um zu prüfen, ob horizontales Verschieben auftritt, und die Schaltflächen mit dem Finger zu drücken, um zu kontrollieren, ob die Touch-Ziele groß genug sind, deckt die meisten Probleme frühzeitig auf.

Zusammengefasst ist eine Website, die auf dem Handy fehlerhaft aussieht, meist eine Website, die mit festen Maßen und nur für einen einzigen Bildschirm gedacht aufgebaut wurde. Ein viewport-Tag, relative Einheiten, ein mit flexbox/grid aufgebautes fließendes Layout und mit max-width: 100% begrenzte Bilder sorgen dafür, dass dieselbe Seite sowohl auf dem Computer als auch auf dem Handy ordentlich aussieht. Da heute der größte Teil der Besuche von mobilen Geräten stammt, ist die einwandfreie Funktion einer Website auf dem Handy heute keine Option mehr, sondern eine grundlegende Notwendigkeit.

Verwandte Leistungen: Webdesign & Software, Software & PC-Anwendungen