Mobilfreundlichkeitsprüfer

Geben Sie eine URL ein, und der Tester lädt sie in einem simulierten Telefon-Viewport (standardmäßig 375×812, iPhone-Größe), überprüft die häufigsten Lesbarkeitsfehler für Mobilgeräte, die der Mobile-Friendly Test von Google früher gekennzeichnet hat, bevor er eingestellt wurde, und gibt eine Liste zurück, die Sie beheben können: fehlendes Viewport-Meta-Tag, Text kleiner als 12px, Antippziele näher als 48×48 px, horizontaler Scroll, Flash/nicht unterstützte Plugins und Inhalte, die breiter als der Viewport sind.

Wie der Test abläuft

  1. 1

    Geben Sie die URL ein

    Vollständige URL mit Protokoll. Nur öffentliche Seiten.

  2. 2

    Seite wird in einem Telefon-Viewport gerendert

    Standardmäßig 375×812, konfigurierbar.

  3. 3

    Automatisierte Überprüfungen werden durchgeführt

    Viewport-Meta, Textgröße, Abstände der Antippziele, Überlauf, Plugins.

  4. 4

    Vorschau und Bericht

    Screenshot der gerenderten Telefonansicht plus eine Liste spezifischer Probleme.

Was der Tester überprüft

Viewport-Konfiguration

  • Gibt es ein <meta name="viewport" content="width=device-width, initial-scale=1">? Ohne dies rendern mobile Browser, als ob das Telefon eine Desktop-Breite hätte und sich anpasst, was zu kleiner Schrift führt.

Textgröße

  • Jeder gerenderte Text unter 12 px wird gekennzeichnet, schwer lesbar auf dem Telefon ohne Pinch-Zoom.
  • Viele Stilrichtlinien empfehlen eine Mindestgröße von 16 px für den Fließtext. Sehr kleine Beschriftungen sind in Ordnung; Fließtext mit 11 px ist nicht akzeptabel.

Größe der Antippziele

  • Schaltflächen, Links, Formularsteuerelemente sollten mindestens 48×48 px groß sein (Google / W3C-Richtlinie zur mobilen Barrierefreiheit).
  • Kleinere Ziele sind schwer genau mit dem Daumen zu treffen und werden gekennzeichnet.

Abstände der Antippziele

  • Ziele, die näher als 8 px an benachbarten Zielen liegen, führen zu Fehlberührungen. Einzelne Kennzeichnung.

Horizontaler Scroll

  • Inhalte, die breiter als der Viewport sind, erzwingen horizontales Wischen, schlechte mobile Benutzererfahrung. Wird normalerweise durch ein Bild ohne max-width: 100% oder eine Tabelle verursacht, die sich nicht umfließen lässt.

Nicht unterstützte Plugins

  • Flash, Silverlight und ActiveX funktionieren nicht auf Handys. Legacy-Seiten verweisen manchmal noch darauf.

Schriftartenladen

  • Sehr große Web-Schriftarten, die das Rendern für Sekunden blockieren, werden gekennzeichnet.

Warum es immer noch wichtig ist

Google hat seinen eigenständigen Mobile-Friendly Test im Dezember 2023 eingestellt, aber die Mobilfreundlichkeit bleibt ein direktes Ranking-Signal über Core Web Vitals und Seiten-Erfahrungsmetriken. Mobile-First-Indexierung bedeutet, dass Google Ihre Seite als Telefon crawlt; was auf Mobilgeräten nicht funktioniert, zeigt sich auch in den Desktop-Rankings.

Typische Lösungen

  • Viewport-Meta zu <head> hinzufügen: <meta name="viewport" content="width=device-width, initial-scale=1">.
  • Responsive CSS über Media Queries: @media (max-width: 768px) { ... }.
  • Flexbox und Grid anstelle von festen Layouts.
  • Setzen Sie max-width: 100%; height: auto für Bilder, damit Bilder mit dem Viewport schrumpfen.
  • Machen Sie Tabellen auf kleinen Bildschirmen scrollbar: in <div style="overflow-x: auto"> einwickeln.
  • Verwenden Sie rem oder em für die Textgröße, damit die Skalierung nach Benutzerpräferenz funktioniert.

Was der Tester nicht erfasst

  • Leistung auf echter Hardware. Ein Low-End-Android-Handy mit 3G hat Verzögerungen, die dieser Tester nicht simuliert. Verwenden Sie Lighthouse für die Leistung.
  • Touch-Interaktionen. Dropdowns, die nur beim Hovern funktionieren und bei Berührung versagen, müssen manuell auf einem echten Gerät getestet werden.
  • Barrierefreiheit über die mobile Größe hinaus. Kontrast, Unterstützung für Bildschirmleser, Tastaturnavigation, verwenden Sie spezielle Barrierefreiheitswerkzeuge.
  • JavaScript-Fehler in mobil-spezifischen Browsern. Safari auf iOS verhält sich manchmal anders als andere WebKit-Bauten.

Häufig gestellte Fragen

Ähnliche Überprüfungen, unterschiedliche Implementierung. Google hat sein öffentliches Tool Ende 2023 eingestellt. Dieser Tester führt dasselbe Set klassischer Überprüfungen durch, das Google verwendet hat, gegen die Version der Seite, die ein headless Browser abruft.

Ja, Google indiziert seit 2020 mobil zuerst, was bedeutet, dass Ihre mobile Darstellung die primäre Version für das Ranking ist. Mobile Probleme schädigen die Rankings selbst bei Desktop-Suchen.

Nein. Der Tester ruft nur öffentlich zugängliche URLs ab. Für geschützte Staging-Umgebungen testen Sie lokal mit dem Gerätemulationsmodus von Chrome DevTools.

Standard ist 375×812 (iPhone 12/13/14). Konfigurierbar auf 390×844 (iPhone 14 Pro), 360×640 (übliches Android) oder 412×915 (Pixel 7).

Typischerweise 5–15 Sekunden, abhängig vom Seitengewicht. Schwere Seiten mit vielen Skripten benötigen länger; der Tester wartet auf das Ladeereignis plus eine kurze Leerlaufzeit, bevor er erfasst.

Verwandte Tools

Tool in anderen Sprachen verfügbar