Rudra Analyzer

Kostenloser Mobil-Checker

Öffnen Sie Ihre Seite in einem echten Browser in Smartphone-, Tablet- und Desktop-Größe und finden Sie heraus, ob sie für mobile Bildschirme eingerichtet ist: ob das Viewport-Tag korrekt ist, ob man zoomen kann und welche Elemente seitlich überstehen und Besucher zum seitlichen Scrollen zwingen.

Geben Sie eine Seite ein, zum Beispiel https://ihrewebsite.de oder https://ihrewebsite.de/preise.

Was dieses Tool prüft

  • Viewport-Tag

    Ob die Seite ein Viewport-Meta-Tag hat, ob es width=device-width verwendet und ob es das Zoomen mit user-scalable=no oder einer maximum-scale unter 2 blockiert.

  • Inhalte breiter als der Bildschirm

    Ob die Seite in jeder Größe breiter als das Gerät ist, gemessen an der echten Bildschirmbreite, mit bis zu fünf überstehenden Elementen und um wie viel sie überstehen.

  • Drei Bildschirmgrößen

    Smartphone (375×667), Tablet (768×1024) und Desktop (1440×900), wobei die Smartphone- und Tablet-Ansicht einen mobilen Browser emulieren.

  • Screenshots

    Ein Screenshot des ersten Bildschirms auf dem Smartphone plus ein Screenshot jeder Größe, bei der wir ein Problem gefunden haben.

  • Ladeprobleme

    Ob die Seite in einer der Größen nicht geladen wurde oder eine Zeitüberschreitung hatte.

So funktioniert die Prüfung

Wir laden Ihre Seite dreimal in Chromium – einmal pro Bildschirmgröße –, warten, bis sie fertig geladen ist, vergleichen dann die Seitenbreite mit der echten Gerätebreite und erstellen Screenshots, wo sie helfen. Mobile Browser verbreitern das Layout stillschweigend, um zu breite Inhalte unterzubringen; deshalb messen wir an der Gerätebreite statt am Viewport des Browsers, der das Problem verbergen würde.

Die Bewertung beginnt bei 100: Ein fehlendes Viewport-Tag kostet 20 Punkte, ein Viewport ohne width=device-width 10, ein Viewport, das Zoomen blockiert, 5, jede Bildschirmgröße mit seitlichem Überlauf 15 und Ladeprobleme 10.

Diese Schnellprüfung misst weder die Größe von Tippzielen noch Textgröße oder überlappende Elemente. Angemeldete Nutzer können einen gründlicheren Layout-Test mit mehreren Smartphone-, Tablet- und Desktop-Profilen ausführen, der auch nach Formularfeldern sucht, die so klein sind, dass Smartphones hineinzoomen, und nach Navigation, die über den Bildschirm hinausläuft.

Nachweise, die Sie sehen

Für jede Bildschirmgröße sehen Sie, ob sie bestanden hat, und die gemessene Seitenbreite. Überlauf-Befunde nennen die überstehenden Elemente (ihren CSS-Selektor und ihre Breite im Vergleich zur Bildschirmbreite), Viewport-Befunde zitieren Ihr Tag wörtlich, und Screenshots zeigen, wie das Problem aussieht.

Was dieses Tool nicht prüft

  • Echte Smartphones und jeden Browser

    Es nutzt Chromium mit Mobil-Emulation. Safari auf dem iPhone und ältere Android-Browser können sich trotzdem anders verhalten.

  • Tippziele, Textgröße und Überlappung

    Zu kleine Schaltflächen, zu kleiner Text und Elemente, die sich gegenseitig verdecken, erfordern den gründlicheren Layout-Test oder eine manuelle Prüfung.

  • Mobile Geschwindigkeit

    Die Ladegeschwindigkeit auf dem Smartphone misst der Speed-Checker, nicht dieses Tool.

  • Menüs und Interaktionen

    Es wird nichts angetippt oder geöffnet, daher werden Menüs, Pop-ups und Formulare nicht ausprobiert.

Häufige Probleme, die wir finden

  • Kein Viewport-Tag oder eines, das Zoomen blockiert

    Ältere Websites haben oft kein Viewport-Tag, sodass Smartphones eine verkleinerte Desktop-Seite zeigen; andere setzen user-scalable=no, was Menschen mit Sehschwäche am Zoomen hindert.

  • Elemente mit fester Breite

    Container, Tabellen oder Einbettungen mit fester Pixelbreite, die breiter als ein Smartphone-Bildschirm ist.

  • Bilder und Videos, die nicht schrumpfen

    Medien ohne max-width: 100%, die die Seite breiter als den Bildschirm machen.

  • Breite Tabellen

    Preis- oder Vergleichstabellen mit vielen Spalten.

  • Langer Text ohne Umbruch

    Lange URLs, E-Mail-Adressen oder Code, die nicht in die nächste Zeile umbrechen können.

So beheben Sie sie

  1. Viewport-Tag korrigieren

    Setzen Sie '<'meta name="viewport" content="width=device-width, initial-scale=1"> in den head der Seite und entfernen Sie user-scalable=no und maximum-scale=1.

  2. Flexible Breiten verwenden

    Ersetzen Sie feste Pixelbreiten durch max-width und Prozentwerte, und nutzen Sie CSS Grid oder Flexbox, damit Layouts auf kleinen Bildschirmen umbrechen.

  3. Medien anpassbar machen

    Geben Sie Bildern, Videos und iframes in Ihrem CSS max-width: 100% und height: auto.

  4. Breite Tabellen in ihrem eigenen Bereich scrollen lassen

    Packen Sie Tabellen in einen Container mit overflow-x: auto oder stapeln Sie Spalten auf kleinen Bildschirmen.

  5. Umbruch langer Wörter erlauben

    Verwenden Sie overflow-wrap: anywhere für Textbereiche, die lange URLs enthalten können.

Häufig gestellte Fragen

Wird auf echten Smartphones getestet?

Nein. Es wird ein echter Chromium-Browser verwendet, der auf Smartphone- und Tablet-Größen mit mobiler Emulation eingestellt ist. Das erkennt Layout-Probleme zuverlässig, ist aber nicht mit jedem Smartphone und Browser identisch, insbesondere nicht mit Safari auf dem iPhone.

Ist das dasselbe wie der Test auf Optimierung für Mobilgeräte von Google?

Nein. Google hat seinen eigenständigen Test auf Optimierung für Mobilgeräte 2023 eingestellt. Unsere Prüfung betrachtet zwei der häufigsten Ursachen für ein schlechtes mobiles Layout – ein fehlendes Viewport-Tag und Inhalte, die breiter als der Bildschirm sind – und zeigt Ihnen Screenshots.

Warum erhalte ich nicht für jede Größe einen Screenshot?

Wir behalten Screenshots der Smartphone-Ansicht und jeder Größe mit einem Problem, damit der Bericht zeigt, worauf es ankommt. Screenshots erfassen den ersten Bildschirm, die Überlaufprüfung misst jedoch die Breite der ganzen Seite.

Prüft es, wie schnell meine Website auf Mobilgeräten ist?

Nein. Nutzen Sie dafür den Speed-Checker – Lighthouse simuliert standardmäßig ein Mittelklasse-Smartphone mit mobiler Verbindung.

Meine Bewertung ist 100. Ist meine Website auf Mobilgeräten perfekt?

Das bedeutet, dass die Seite ein korrektes Viewport-Tag hat, das Zoomen erlaubt, und in den drei getesteten Größen nichts über den Bildschirm hinausragt. Zu kleine Schaltflächen oder zu kleiner Text erfordern einen genaueren Blick oder den gründlicheren Layout-Test für angemeldete Nutzer.

Hilfreiche Ratgeber

Ähnliche kostenlose Tools

Soll lieber jemand anderes es beheben?

Diese Prüfungen sind kostenlos, ebenso die Ratgeber. Wenn ein Mensch die Änderungen vornehmen soll, bietet unser Team kostenpflichtige Hilfe an.

Professionelle Hilfsangebote ansehenSo testen und bewerten wirAlle kostenlosen Tools