Website in einer mobilen Vorschau prüfen

Was dieser Mobile-Friendly Test sichtbar macht

Eine Seite kann auf dem Desktop gut aussehen und auf dem Smartphone trotzdem schlecht bedienbar sein. Häufige Ursachen sind starre Breiten, Tabellen ohne Scrollbereich, lange untrennbare Texte oder zu kleine Navigationselemente. Das Tool rendert das geladene HTML mit den verfügbaren Stylesheets in einer isolierten Browser-Vorschau und misst die resultierenden Abmessungen.

Sie können zwischen 360, 390 und 430 CSS-Pixeln wählen. Die Auswertung zeigt horizontale Überbreite, sichtbare Textbereiche unter zwölf Pixeln und ausgewählte Bedienelemente unter 24 Pixeln in einer Dimension. Diese Schwellen dienen zur Sichtprüfung. Sie ersetzen keine vollständige Barrierefreiheitsprüfung; zum Beispiel gelten für Links im Fließtext andere Anforderungen als für alleinstehende Buttons.

Viewport und responsive Breiten prüfen

Für die typische responsive Darstellung wird eine Angabe wie <meta name="viewport" content="width=device-width, initial-scale=1"> benötigt. Fehlt width=device-width, verwendet diese Vorschau vereinfacht eine 980-Pixel-Layoutfläche und verkleinert sie auf die gewählte Smartphone-Breite. So wird der häufige Effekt einer winzig dargestellten Desktop-Seite sichtbar.

Beheben Sie Überbreiten an der Ursache: flexible Container, passende Bildbreiten und ein eigener horizontaler Scrollbereich für breite Tabellen sind meist sinnvoller als ein pauschales overflow-x:hidden. Prüfen Sie lange URLs und Wörter separat. Das Ausblenden eines überstehenden Elements macht dessen Inhalt nicht automatisch benutzbar.

Die Grenzen der isolierten Vorschau

JavaScript wird aus Sicherheits- und Kostengründen nicht ausgeführt. Menüs, Cookie-Banner oder Inhalte, die erst durch Skripte entstehen, können fehlen. Externe Schriftdateien, Hintergrundbilder, CSS-Imports und responsive Bildquellen aus srcset werden nicht nachgeladen. Das Tool verwendet verfügbare Ersatzschriften. Nicht geladene Stylesheets und Bilder werden ausgewiesen; bei wichtigen Ausfällen ist das Layout nur eingeschränkt aussagekräftig.

Die URL wird mit einem Seitenreport-Prüfagenten abgerufen. Es handelt sich nicht um einen Googlebot-Crawl und nicht um eine vollständige Geräte-Emulation. Nutzen Sie ergänzend einen echten Smartphone-Browser, um Touch-Bedienung, Zoom, Formularabläufe und nachgeladene Inhalte zu testen.

So nutzen Sie die Ergebnisse im Arbeitsalltag

1. URL laden und die Hinweise zur Vollständigkeit lesen.
2. Vorschau und betroffene Elemente ansehen.
3. Den passenden CSS-Selektor im eigenen Stylesheet suchen und die Ursache korrigieren.
4. Mit einer weiteren Breite erneut testen.
5. PNG-Vorschau und CSV-Fundliste für die Umsetzung weitergeben.

Häufige Fragen