Was ist der Browser-Gerätemodus?

Was ist der Browser-Gerätemodus?

Der Browser-Gerätemodus ist eine Funktion der Entwicklerwerkzeuge, etwa der Chrome DevTools, die ein Desktop-Browserfenster wie ein Smartphone oder Tablet verhalten lässt. Er stellt Viewport-Größe und Pixeldichte ein, kann Touch- statt Klick-Ereignisse auslösen und Netzwerk und CPU drosseln. Chrome nennt ihn eine Näherung erster Ordnung an ein echtes Gerät, keinen Ersatz dafür.

So funktioniert er

Öffnen Sie in Chrome die DevTools und klicken Sie auf die Schaltfläche zum Umschalten der Geräteleiste (Toggle device toolbar). Es gibt zwei Modi (siehe Chromes Dokumentation zum Gerätemodus):

• Responsiver Viewport: Ziehen Sie an den Griffen oder geben Sie Breite und Höhe ein, um zu sehen, wo Ihr Layout bricht. Eine Breitenleiste bietet Voreinstellungen von 320 px bis 2560 px, und mit Show media queries werden Ihre CSS-Breakpoints über dem Viewport angezeigt, zwischen denen Sie per Klick wechseln können.
• Bestimmtes Gerät: Wählen Sie in der Liste Dimensions ein Smartphone oder Tablet für dessen Bildschirmgröße, drehen Sie es ins Querformat oder legen Sie ein eigenes Gerät an.

Die Leiste steuert außerdem die Pixeldichte (DPR) und den Gerätetyp: Mobile löst Touch-Ereignisse aus, Mobile (no touch) Klick-Ereignisse. Die Drosselungsliste hat zwei Voreinstellungen: Mid-tier mobile simuliert schnelles 3G mit vierfach langsamerer CPU, Low-end mobile langsames 3G mit sechsfach langsamerer CPU. Standort und Ausrichtung stellen Sie im Bereich Sensors ein.

Beispiel: ein Menü, das auf dem Smartphone bricht

Ihre Navigation sieht bei 1440 px gut aus. Im Gerätemodus wählen Sie eine Smartphone-Breite, und das Menü läuft über, weil eine feste Breitenangabe nie angepasst wurde. Die Media-Query-Leiste zeigt, dass es unter 768 px keinen Breakpoint gibt, also ergänzen Sie einen. Dann schalten Sie die Drosselung auf Mid-tier mobile, laden neu und sehen, dass das Titelbild mehrere Sekunden braucht. Das ist ein Problem für den Largest Contentful Paint, das Ihnen im Büro-WLAN nie auffiele.

Was der Gerätemodus nicht zeigen kann

Chrome sagt es deutlich: Mit dem Gerätemodus führen Sie Ihren Code nicht auf einem Mobilgerät aus. Mobile CPUs sind anders gebaut als Laptop- und Desktop-CPUs, die Drosselung bremst also Ihren Rechner, macht ihn aber nicht zum Smartphone. Im Zweifel empfiehlt Chrome, die Seite per Remote-Debugging auf einem echten Gerät auszuführen.

Häufige Fehler

• Emulation als Gerätetest behandeln. Echte Browser, echte Hardware und echte Netze verhalten sich anders. Nutzen Sie den Gerätemodus, um Layout- und Viewport-Fehler schnell zu finden, und prüfen Sie auf mindestens einem echten Smartphone.
• Nur eine Smartphone-Größe testen. Prüfen Sie die Viewports aus Ihrer eigenen Analytics und ziehen Sie die Griffe, um Breakpoints zu finden, die Sie nicht geplant hatten.
• Geschwindigkeit nach einem einzelnen gedrosselten Lauf beurteilen. Ein Lauf auf einem ausgelasteten Laptop ist ungenau. Wiederholen Sie ihn oder messen Sie mit einem Werkzeug, das geplant läuft.
• Die Pixeldichte vergessen. Ein unscharfes Bild auf einem hochauflösenden Display zeigt sich nur, wenn die DPR zum echten Gerät passt.
• Erst am Desktop entwerfen. Wer Mobile erst am Ende ansieht, zahlt für Korrekturen mehr. Siehe Mobile-First-Design.

Gerätemodus, Tests und Monitoring

Der Gerätemodus ist eine manuelle Einzelprüfung. Wiederholbar wird sie, wenn dieselben Seiten nach Zeitplan laufen: LoadFocus Page Speed Monitoring führt Lighthouse-Audits für Desktop und Mobil aus 25 Cloud-Regionen aus und alarmiert Sie bei Änderungen. Für die Zahlen Ihrer echten Besucher zeigt der kostenlose Core-Web-Vitals-Checker Felddaten aus dem Chrome UX Report für Mobil und Desktop, und PageSpeed Insights ist ein verwandtes Labor- und Feldwerkzeug. Unsere Beiträge zu Tests in Smartphone- und Tablet-Emulatoren und zum Planen von Mobile-Emulation gehen beim Testen weiter, und der Eintrag zu Core Web Vitals erklärt die Messwerte.

Häufige Fragen: Browser-Gerätemodus

Wie öffne ich den Gerätemodus in Chrome?

Öffnen Sie die Chrome DevTools und klicken Sie oben im DevTools-Fenster auf die Schaltfläche zum Umschalten der Geräteleiste. Wählen Sie dann Responsive oder ein bestimmtes Gerät.

Ist der Gerätemodus dasselbe wie ein Test auf einem echten Smartphone?

Nein. Er nähert Bildschirmgröße, Pixeldichte, Touch-Eingabe und Netzbedingungen an, aber Ihr Code läuft weiterhin auf Ihrem eigenen Rechner. Mobile CPUs unterscheiden sich von Desktop-CPUs, die Leistung kann daher stark abweichen.

Was bewirkt die Drosselung Mid-tier mobile?

Sie simuliert eine schnelle 3G-Verbindung und verlangsamt die CPU um den Faktor vier. Low-end mobile simuliert langsames 3G und eine sechsfach langsamere CPU.

Kann ich im Gerätemodus Touch-Ereignisse testen?

Teilweise. Bei Gerätetyp Mobile erzeugt die Maus Touch-Ereignisse, was beim Prüfen von Tap-Handlern hilft. Nicht jede Geste und das Gefühl eines echten Bildschirms lassen sich damit nachstellen.

Ändert der Gerätemodus, was Google sieht?

Nein. Der Gerätemodus ändert nur, wie Ihr eigener Browser die Seite anzeigt und lädt. Er verändert weder Ihre Website noch Ihr Ranking oder die Daten in Feldberichten.