Website auf dem Handy falsch dargestellt: Ursachen

Am Schreibtisch sieht alles ordentlich aus. Dann öffnen Sie die eigene Seite auf dem Smartphone – und die Seite wackelt seitlich, Text ist abgeschnitten, Bilder ragen über den Rand oder das Menü lässt sich nicht öffnen. Für Ihre Besucher ist das kein Detail: Ein großer Teil von ihnen kommt mobil, und wer sich durch eine verschobene Seite kämpfen muss, ruft eher die nächste an.

Die gute Nachricht: Die Ursachen sind überschaubar, und die meisten lassen sich gezielt eingrenzen.

Schritt 1: Das Fehlerbild genau beschreiben

Je genauer Sie wissen, was falsch aussieht, desto schneller finden Sie die Ursache. Die typischen Fehlerbilder:

• Die Seite lässt sich seitlich verschieben. Irgendein Element ist breiter als der Bildschirm und drückt die Seite nach rechts auf. Rechts entsteht ein weißer Streifen.
• Text ist abgeschnitten. Überschriften enden mitten im Wort am Bildschirmrand, oder Text verschwindet hinter einem Container mit fester Höhe.
• Elemente überlappen sich. Bilder liegen über Text, Buttons über anderen Buttons, ein Formular schiebt sich über die Fußzeile.
• Die Schrift ist winzig. Die ganze Seite wirkt wie eine verkleinerte Desktop-Version, und Sie müssen mit zwei Fingern zoomen.
• Das Menü geht nicht auf. Das Menü-Symbol (die drei Striche) reagiert nicht, oder das Menü öffnet sich, ist aber nicht bedienbar.

Prüfen Sie außerdem: Betrifft es alle Seiten oder nur eine? Tritt es auf jedem Handy auf oder nur in einem bestimmten Browser? Und was hat sich zuletzt geändert – ein Update, ein neues Plugin, ein neuer Abschnitt auf der Startseite?

Schritt 2: Mit den Entwicklertools nachstellen

Jeder Desktop-Browser bringt eine Geräteansicht mit. In Chrome und Edge öffnen Sie mit F12 die Entwicklertools und schalten mit Strg + Umschalt + M die Geräteansicht ein; in Firefox öffnet dieselbe Tastenkombination die responsive Ansicht. Oben wählen Sie ein Gerät oder ziehen die Breite frei auf und zu.

So nutzen Sie die Ansicht zur Fehlersuche:

1. Ziehen Sie die Breite langsam von breit nach schmal und beobachten Sie, an welcher Stelle das Layout bricht.
2. Klicken Sie mit dem Auswahlwerkzeug (Pfeil-Symbol oben links in den Entwicklertools) auf das Element, das übersteht. Rechts sehen Sie, welche Breite, welcher Abstand und welche CSS-Regel dafür verantwortlich ist.
3. Bei seitlichem Scrollen hilft ein kleiner Befehl in der Konsole, der alle Elemente auflistet, die über den rechten Rand hinausragen:

[...document.querySelectorAll('*')].filter(el => el.getBoundingClientRect().right > document.documentElement.clientWidth)

Das erste Element dieser Liste, das nicht nur ein umgebender Container ist, ist meist der Übeltäter.

Schritt 3: Die häufigsten Ursachen prüfen

Fehlender Viewport-Meta-Tag. Im Kopfbereich jeder Seite sollte diese Zeile stehen:

<meta name="viewport" content="width=device-width, initial-scale=1">

Fehlt sie, stellt der Handy-Browser die Seite wie auf einem breiten Monitor dar und verkleinert sie – daher die winzige Schrift. Sie prüfen das im Browser über Seitenquelltext anzeigen und die Suche nach „viewport“. Bei WordPress setzt normalerweise das Theme diesen Tag; fehlt er, ist das ein Hinweis auf ein sehr altes oder fehlerhaft angepasstes Theme.

Feste Breiten in Pixeln. Ein Container mit width: 1200px passt auf kein Handy. Flexible Angaben wie max-width: 100% oder Prozentwerte lassen Elemente mitschrumpfen. Feste Breiten stecken oft in nachträglich eingefügtem CSS, in alten Widgets oder in Abschnitten, die aus einer anderen Seite kopiert wurden.

Zu breite Bilder, Tabellen und iframes. Bilder ohne max-width: 100%, breite Preistabellen und eingebettete Inhalte wie Google Maps, YouTube-Videos oder externe Buchungs-Widgets bringen häufig eine feste Breite mit. Tabellen packen Sie in einen Bereich, der auf dem Handy seitlich scrollen darf, statt die ganze Seite aufzudrücken. Bei iframes ersetzen Sie die feste Breitenangabe durch eine flexible.

Page-Builder: Einstellungen pro Gerät. Elementor, Divi und andere Builder speichern Schriftgrößen, Abstände, Spaltenbreiten und Sichtbarkeit getrennt für Desktop, Tablet und Mobil. Wurde eine Seite nur in der Desktop-Ansicht gebaut, übernimmt die Handy-Ansicht teils unpassende Werte – etwa einen großen seitlichen Innenabstand oder eine Überschrift in Desktop-Größe. Schalten Sie im Editor auf die Mobil-Ansicht um und prüfen Sie dort jeden auffälligen Abschnitt. Achten Sie auch auf Elemente, die nur auf dem Desktop ausgeblendet wurden und auf dem Handy plötzlich doppelt erscheinen. Lädt der Editor selbst nicht, hilft der Ratgeber Elementor lädt nicht.

Cache und Minify. Cache- und Optimierungs-Plugins fassen CSS- und JavaScript-Dateien zusammen, verkleinern sie oder laden sie verzögert. Geht dabei etwas schief, fehlen auf dem Handy einzelne Styles, oder das Menü-Skript startet nicht. Manche Plugins halten außerdem einen eigenen Cache nur für Mobilgeräte vor, der nach einer Änderung noch die alte Fassung ausliefert. Leeren Sie alle Caches – Plugin, Hoster, gegebenenfalls CDN – und schalten Sie testweise das Zusammenfassen und Verzögern von CSS und JavaScript ab. Bei Elementor lassen sich die erzeugten CSS-Dateien zusätzlich unter Elementor → Werkzeuge neu generieren. Mehr zu diesen Plugins steht im Ratgeber WordPress langsam.

Veraltetes Theme. Themes, die seit Jahren keine Aktualisierung bekommen haben, sind oft nicht für heutige Bildschirmgrößen gebaut oder vertragen sich nicht mit aktuellen Plugin- und WordPress-Versionen. Prüfen Sie unter Design → Themes, ob Updates anstehen und wann das Theme zuletzt gepflegt wurde. Bei einem Child-Theme können auch eigene Anpassungen die Ursache sein.

Schritt 4: Auf einem echten Handy gegenprüfen

Die Entwicklertools simulieren die Bildschirmbreite, aber nicht alles andere. Testen Sie nach jeder Korrektur auf einem echten Gerät:

1. Seite im privaten Modus des Handy-Browsers öffnen, damit kein alter Cache stört.
2. Wenn möglich zwei Geräte nutzen, zum Beispiel ein iPhone mit Safari und ein Android-Gerät mit Chrome. Die Browser stellen manches unterschiedlich dar.
3. Hoch- und Querformat prüfen.
4. Die wichtigsten Wege durchtippen: Menü öffnen, Telefonnummer antippen, Kontaktformular ausfüllen und absenden. Achten Sie darauf, ob die Bildschirmtastatur Eingabefelder verdeckt.
5. Einmal im Mobilfunknetz statt im WLAN laden – so sehen Sie, ob Elemente beim Laden springen oder spät nachrutschen.

Warum das auch für Google zählt

Google bewertet und indexiert Websites in erster Linie anhand der mobilen Version. Das nennt sich Mobile-First-Indexierung. Inhalte, die auf dem Handy fehlen oder ausgeblendet sind, und eine Seite, die sich mobil schlecht bedienen lässt, wirken sich damit auch auf Ihre Sichtbarkeit in der Suche aus. Wichtiger noch ist der direkte Effekt: Besucher, die auf dem Handy nicht zurechtkommen, fragen nicht an.

Umsetzungsplan

Sofort

1. Fehlerbild notieren: seitliches Scrollen, abgeschnittener Text, Überlappung, winzige Schrift oder Menü ohne Funktion.
2. Alle Caches leeren und die Seite im privaten Modus auf dem Handy neu laden.
3. In den Entwicklertools die Geräteansicht öffnen und das überstehende Element mit dem Auswahlwerkzeug finden.

Danach

4. Im Quelltext prüfen, ob der Viewport-Meta-Tag vorhanden ist.
5. Feste Pixelbreiten durch flexible Angaben ersetzen; Bilder, Tabellen und iframes begrenzen.
6. Im Page-Builder jeden auffälligen Abschnitt in der Mobil-Ansicht nachjustieren.
7. Testweise das Zusammenfassen und Verzögern von CSS und JavaScript abschalten, wenn Styles fehlen oder das Menü nicht reagiert.
8. Nach jeder Korrektur auf mindestens einem echten Handy gegenprüfen.

Vorbeugen

9. Neue Abschnitte immer zuerst in der Mobil-Ansicht des Builders kontrollieren, bevor Sie sie veröffentlichen.
10. Nach Updates von Theme, Page-Builder oder Optimierungs-Plugin die Startseite und die wichtigsten Unterseiten auf dem Handy aufrufen.
11. Eingebettete Inhalte nur mit flexibler Breite einfügen.
12. Ein Theme verwenden, das regelmäßig aktualisiert wird, oder die Website-Pflege abgeben.

Wir bringen Ihre Handy-Ansicht in Ordnung

Finden Sie das verursachende Element nicht, haben Sie keinen Zugriff auf das Theme oder hängt der Fehler an einem Plugin, das Sie nicht abschalten möchten: Wir übernehmen die Fehlersuche und korrigieren die Darstellung auf allen Bildschirmgrößen.

Oder rufen Sie direkt an: 0 33 41 - 35 66 146.

Häufige Fragen

Warum sieht meine Website am PC gut aus, auf dem Handy aber nicht?

Am Computer steht viel Platz zur Verfügung, auf dem Handy oft weniger als ein Drittel der Breite. Alles, was mit einer festen Breite gebaut wurde – ein Bild, eine Tabelle, ein eingebettetes Video oder ein Container mit Pixelangabe –, passt dann nicht mehr hinein. Hinzu kommen Einstellungen, die im Page-Builder nur für die Desktop-Ansicht gesetzt wurden, und Optimierungs-Plugins, die auf Mobilgeräten anders arbeiten.

Was ist der Viewport-Meta-Tag und brauche ich ihn?

Der Viewport-Meta-Tag sagt dem Handy-Browser, dass er die Seite in der tatsächlichen Gerätebreite darstellen soll. Fehlt er, rendert der Browser die Seite wie auf einem breiten Bildschirm und verkleinert sie anschließend – das Ergebnis ist winzige Schrift, die man nur mit Zoomen lesen kann. Jede moderne Website braucht ihn; aktuelle WordPress-Themes bringen ihn normalerweise mit.

Reicht es, die Handy-Ansicht in den Browser-Entwicklertools zu prüfen?

Für die Fehlersuche ist die Geräteansicht der Entwicklertools ideal, weil Sie dort Breiten schnell wechseln und das störende Element direkt markieren können. Sie ersetzt aber nicht den Test auf einem echten Handy: Touch-Bedienung, die Bildschirmtastatur, Browserleisten und das tatsächliche Ladeverhalten im Mobilfunknetz zeigen sich nur dort.

Ist eine schlechte Handy-Ansicht auch ein Problem für Google?

Ja. Google nutzt für die Bewertung und Indexierung einer Seite in erster Linie die mobile Version (Mobile-First-Indexierung). Was auf dem Handy fehlt, versteckt ist oder schlecht bedienbar ist, wirkt sich deshalb auch auf die Sichtbarkeit in der Suche aus – zusätzlich zu den Besuchern, die eine kaputte Seite schlicht wieder verlassen.

Mein Menü öffnet sich auf dem Handy nicht. Woran liegt das?

Meist an JavaScript. Das Menü-Symbol braucht ein Skript, das beim Antippen das Menü einblendet. Wird dieses Skript von einem Optimierungs-Plugin verzögert, zusammengefasst oder fehlerhaft verkleinert, passiert beim Antippen nichts. Seltener liegt ein anderes Element unsichtbar über dem Menü-Symbol und fängt den Klick ab.