Die Seite an den Bildschirm eines Smartphones anpassen
Beschreibung
Dieses Kriterium prüft, ob die Seite auf einem Smartphone richtig angezeigt wird. iPand lädt sie auf einem simulierten Pixel 7 mit 412 px Breite und prüft vier Punkte: Das viewport-Tag gibt width=device-width an, ohne den Zoom zu sperren; die Seite ist nicht breiter als der Bildschirm; mindestens 60 % des sichtbaren Textes sind 12 px groß oder größer; und das Layout verschiebt sich beim Laden kaum (CLS von höchstens 0,1).
Warum es für KI-Assistenten zählt
Google indexiert die mobile Version Ihrer Seiten, die sein Smartphone-Crawler abruft. AI Overviews und AI Mode stützen sich auf diesen Index. Google zählt eine mobilfreundliche Darstellung außerdem zu einer guten Nutzererfahrung auf der Seite, die es für seine KI-Funktionen empfiehlt.
- Ohne viewport-Tag zeigt das Smartphone die Seite wie einen verkleinerten Desktop-Bildschirm: winziger Text, Zoomen ist Pflicht.
- Ein gesperrter Zoom (user-scalable=no) hindert sehbehinderte Menschen daran, die Seite zu lesen; die Barrierefreiheitsregeln der WCAG verlangen eine Vergrößerung auf mindestens das Doppelte.
- Inhalte, die sich beim Laden verschieben, führen zu Fehlklicks: Der CLS misst diese Verschiebungen, und web.dev bewertet ihn bis 0,1 als gut.
So korrigieren Sie es
- 1 Geben Sie den Anzeigebereich an Setzen Sie in den Kopfbereich der Seite das Tag <meta name="viewport" content="width=device-width, initial-scale=1">. Ergänzen Sie weder user-scalable=no noch einen maximum-scale unter 2: Ihre Besucher müssen zoomen können. Dieser Punkt wiegt im Kriterium am schwersten.
- 2 Beseitigen Sie den horizontalen Überlauf Die Seite darf nicht breiter sein als der Bildschirm, bei iPand also 412 px. Suchen Sie nach Elementen mit fester Breite: Bilder, Tabellen, eingebettete Videos, Blöcke mit Pixelmaßen. Geben Sie Bildern max-width: 100% und ziehen Sie flexible Layouts (Flexbox, Grid) festen Breiten vor.
- 3 Vergrößern Sie den Text Mindestens 60 % des sichtbaren Textes müssen 12 px groß oder größer sein. Halten Sie den Fließtext nahe an 16 px, der Standardgröße der Browser. Prüfen Sie auch Hinweise, Menüs und Fußzeilen, die oft zu klein gesetzt sind.
- 4 Reservieren Sie Platz für Bilder und eingebettete Elemente Der CLS darf 0,1 nicht überschreiten. Geben Sie width und height bei Bildern und Videos an, reservieren Sie die Höhe von Bannern, Anzeigen und Widgets vor dem Laden, und fügen Sie keine Inhalte über bereits angezeigten Inhalten ein.
Fazit
Google liest die mobile Version Ihrer Seite. Geben Sie den Anzeigebereich an, ohne den Zoom zu sperren, vermeiden Sie Überlauf und sorgen Sie für lesbaren Text und ein stabiles Layout.
