Im Gerätemodus können Sie das Erscheinungsbild und die Leistung Ihrer Seite auf einem Mobilgerät analysieren.
Überblick
„Gerätemodus“ ist die Bezeichnung für eine Reihe von Funktionen in den Chrome-Entwicklertools, mit denen Sie Mobilgeräte simulieren können. Zu den Funktionen gehören:
- Mobilen Darstellungsbereich simulieren
- CPU drosseln
- Netzwerk drosseln
- Außerdem sollten Sie im Bereich Sensoren Folgendes tun:
Beschränkungen
Der Gerätemodus ist eine allgemeine Annäherung des Aussehens und Verhaltens Ihrer Seite auf einem Mobilgerät. Im Gerätemodus führen Sie Ihren Code nicht tatsächlich auf einem Mobilgerät aus. Sie simulieren die mobile User Experience von Ihrem Laptop oder Desktop-Computer aus.
Es gibt einige Aspekte von Mobilgeräten, die mit Entwicklertools nie simuliert werden können. Beispielsweise unterscheidet sich die Architektur von mobilen CPUs stark von der Architektur von Laptop- oder Desktop-CPUs. Im Zweifelsfall ist es am besten, Ihre Seite tatsächlich auf einem Mobilgerät zu veröffentlichen. Mit der Funktion Remote-Debugging können Sie den Code einer Seite über Ihren Laptop oder Computer aufrufen, ändern, debuggen und ein Profil erstellen, während die Seite tatsächlich auf einem Mobilgerät ausgeführt wird.
Gerätesymbolleiste öffnen
So öffnen Sie die Gerätesymbolleiste:
- Öffnen Sie die Entwicklertools.
- Klicken Sie oben in der Aktionsleiste auf Geräte Gerätesymbolleiste ein-/ausblenden.
Mobilen Darstellungsbereich simulieren
Standardmäßig wird die Symbolleiste des Geräts im Darstellungsbereich geöffnet und die Abmessungen müssen auf Responsiv festgelegt sein. Mit dem Drop-down-Menü Dimensionen können Sie die Abmessungen eines bestimmten Mobilgeräts simulieren.
Modus des responsiven Darstellungsbereichs
Ziehen Sie die Ziehpunkte, um die Größe des Darstellungsbereichs auf die gewünschten Abmessungen zu ändern. Oder geben Sie spezifische Werte
in die Felder für Breite und Höhe ein. In diesem Beispiel wird die Breite auf 480 und die Höhe auf 415 festgelegt.
Alternativ können Sie die Leiste mit den Voreinstellungen für die Breite verwenden, um die Breite mit einem Klick auf eine der folgenden Optionen festzulegen:
| Handy S | Mobil M | Handy L | Tablet | Laptop | Laptop L | 4K |
|---|---|---|---|---|---|---|
| 320 Pixel | 375 Pixel | 425 Pixel | 768 Pixel | 1.024 Pixel | 1.440 Pixel | 2.560 Pixel |
Medienabfragen anzeigen
Wenn Sie Haltepunkte für Medienabfragen über dem Darstellungsbereich anzeigen möchten, klicken Sie auf 
Weitere Optionen > Medienabfragen anzeigen.
In den Entwicklertools werden jetzt zwei zusätzliche Balken über dem Darstellungsbereich angezeigt:
- Die blaue Leiste mit
max-widthHaltepunkten - Die orangefarbene Leiste mit
min-widthHaltepunkten
Klicken Sie zwischen die Haltepunkte, um die Breite des Darstellungsbereichs so zu ändern, dass der Haltepunkt ausgelöst wird.
Um die entsprechende @media-Deklaration zu finden, klicke mit der rechten Maustaste zwischen Haltepunkte und wähle Im Quellcode anzeigen aus. Mit den Entwicklertools wird der Bereich Quellen in der entsprechenden Zeile im Editor geöffnet.
Pixelverhältnis des Geräts festlegen
Das Geräte-Pixel-Verhältnis (DPR) ist das Verhältnis zwischen physischen Pixeln auf dem Hardwarebildschirm und logischen CSS-Pixeln. Anders ausgedrückt teilt Chrome mit, wie viele Bildschirmpixel zum Zeichnen eines CSS-Pixels verwendet werden sollen. Chrome verwendet den DPR-Wert beim Zeichnen auf HiDPI-Displays (High Dots Per Inch).
So legen Sie einen DPR-Wert fest:
Klicken Sie auf Weitere Optionen
> Pixelverhältnis des Geräts hinzufügen.
Wählen Sie in der Aktionsleiste oben im Darstellungsbereich einen Wert für die effektive Erstellung von Berichten aus dem neuen Drop-down-Menü DPR aus.
Gerätetyp festlegen
Verwenden Sie die Liste Device Type (Gerätetyp), um ein Mobilgerät oder einen Computer zu simulieren.
Wenn Sie die Liste oben in der Aktionsleiste nicht sehen, wählen Sie Weitere Optionen 
> Gerätetyp hinzufügen aus.
In der nächsten Tabelle werden die Unterschiede zwischen den Optionen beschrieben. Mit der Renderingmethode wird angegeben, ob Chrome die Seite als Darstellungsbereich für Mobilgeräte oder Computer rendert. Das Cursorsymbol bezieht sich auf die Art des Cursors, den Sie sehen, wenn Sie den Mauszeiger auf die Seite bewegen. Ausgelöste Ereignisse bezieht sich darauf, ob die Seite touch- oder click-Ereignisse auslöst, wenn Sie mit der Seite interagieren.
| Wahltaste | Rendering-Methode | Cursorsymbol | Ausgelöste Ereignisse |
|---|---|---|---|
| Mobilgeräte | Mobilgeräte | Circle | Touchscreen |
| Mobilgerät (keine Touchbedienung) | Mobilgeräte | Normal | Klick |
| Computer | Computer | Normal | Klick |
| Desktop (Touch) | Computer | Circle | Touchscreen |
Gerätespezifischer Modus
Wenn Sie die Abmessungen eines bestimmten Mobilgeräts simulieren möchten, wählen Sie es in der Liste Abmessungen aus.
Weitere Informationen finden Sie unter Benutzerdefiniertes Mobilgerät hinzufügen.
Darstellungsbereich ins Querformat drehen
Klicken Sie auf screen_rotation Drehen, um den Darstellungsbereich in das Querformat zu drehen.
Hinweis: Wenn die Gerätesymbolleiste schmal ist, wird die Schaltfläche Drehen 
ausgeblendet.
Siehe auch Ausrichtung festlegen.
Dual Screen-Modus ein-/ausschalten
Einige Geräte, z. B. Surface Duo, haben zwei Bildschirme und zwei Möglichkeiten, sie zu verwenden: wenn ein oder beide Bildschirme aktiv sind.
Wenn Sie zwischen Dual- und Einzelbildschirm wechseln möchten, klicken Sie in der Symbolleiste auf devices_fold Dual-Screen-Modus ein-/ausschalten.
Gerätestatus festlegen
Einige Geräte, z. B. das Asus Zenbook Fold, haben faltbare Displays. Diese Bildschirme haben eine Haltung: ununterbrochen oder zugeklappt. Die durchgehende Position bezieht sich auf eine „flache“ Position und gefaltet bildet einen Winkel zwischen den einzelnen Bereichen des Displays.
Um den Gerätestatus festzulegen, wählen Sie im entsprechenden Drop-down-Menü in der Symbolleiste die Option Fortlaufend oder Zugeklappt aus.
Geräterahmen anzeigen
Wenn Sie die Abmessungen eines bestimmten Mobilgeräts wie Nest Hub simulieren, wählen Sie Weitere Optionen 
> Geräterahmen anzeigen aus, um den Frame des physischen Geräts um den Darstellungsbereich herum anzuzeigen.
In diesem Beispiel wird in den Entwicklertools der Frame für Nest Hub angezeigt.
Benutzerdefiniertes Mobilgerät hinzufügen
So fügen Sie ein benutzerdefiniertes Gerät hinzu:
Klicken Sie auf die Liste Gerät und wählen Sie Bearbeiten aus.
Wählen Sie unter Einstellungen settings > Geräte ein Gerät aus der Liste der unterstützten Geräte aus oder klicken Sie auf Benutzerdefiniertes Gerät hinzufügen, um ein eigenes Gerät hinzuzufügen.
Wenn Sie einen eigenen Namen hinzufügen, geben Sie einen Namen, eine Breite und eine Höhe für das Gerät ein und klicken Sie dann auf Hinzufügen.
Die Felder Gerätepixelverhältnis, User-Agent-String und Gerätetyp sind optional. Das Feld für den Gerätetyp ist die Liste, die standardmäßig auf Mobil festgelegt ist.
Wählen Sie im Darstellungsbereich das neu hinzugefügte Gerät aus der Liste Abmessungen aus.
Führungslinien anzeigen
Klicken Sie auf Weitere Optionen 
> Lineal einblenden, um die Führungslinien zu sehen. Die Größeneinheit der Lineale sind Pixel.
In den Entwicklertools werden Lineale oben und links neben dem Darstellungsbereich angezeigt.
Klicken Sie bei bestimmten Markierungen auf das Lineal, um die Breite und Höhe des Darstellungsbereichs festzulegen.
Darstellungsbereich zoomen
Verwenden Sie zum Heran- oder Herauszoomen die Zoomliste.
Screenshot erstellen
Wenn Sie einen Screenshot des Darstellungsbereichs erstellen möchten, klicken Sie auf 
Weitere Optionen > Screenshot erstellen.
Wenn Sie einen Screenshot der gesamten Seite einschließlich des Inhalts erstellen möchten, der im Darstellungsbereich nicht sichtbar ist, wählen Sie im selben Menü Screenshot in Originalgröße erstellen aus.
Netzwerk und CPU drosseln
Wenn Sie sowohl das Netzwerk als auch die CPU drosseln möchten, wählen Sie in der Liste Throttle die Option Mid-Tier mobile oder Low-End mobile aus.
Ein Mobilgerät der mittleren Preisklasse simuliert ein schnelles 3G und drosselt die CPU, sodass sie viermal langsamer ist als normal. Ein Low-End-Mobilgerät simuliert ein langsames 3G und drosselt die CPU sechsmal langsamer als normal. Beachten Sie, dass die Drosselung von der normalen Funktion Ihres Laptops oder Desktops abhängt.
Hinweis: Wenn die Gerätesymbolleiste schmal ist, wird die Liste Throttle (Throttle) ausgeblendet.
Nur CPU drosseln
Wenn Sie nur die CPU und nicht das Netzwerk drosseln möchten, rufen Sie den Bereich Leistung auf, klicken Sie auf Aufnahmeeinstellungen 
und wählen Sie dann in der Liste CPU die Option 4-fache Verlangsamung, 6-fache Verlangsamung oder 20-fache Verlangsamung aus.
Nur Netzwerk drosseln
Wenn Sie nur das Netzwerk und nicht die CPU drosseln möchten, wählen Sie im Bereich Netzwerk in der Liste Drosselung die Option Schnelles 3G oder Langsames 3G aus.
Oder drücken Sie Befehlstaste+Umschalt+P (Mac) oder Strg+Umschalt+P (Windows, Linux, ChromeOS), um das Befehlsmenü zu öffnen, geben Sie 3G ein und wählen Sie Schnelle 3G-Drosselung aktivieren oder Langsame 3G-Drosselung aktivieren aus.
Sie können die Netzwerkdrosselung auch im Bereich Leistung festlegen. Klicken Sie auf Capture Settings (Aufnahmeeinstellungen) 
und wählen Sie dann in der Liste Network (Netzwerk) die Option Fast 3G (Schnelles 3G) oder Slow 3G (Langsames 3G) aus.
Sensoren emulieren
Im Bereich Sensoren können Sie die Standortbestimmung überschreiben, die Geräteausrichtung simulieren, Berührungen erzwingen und den Inaktivitätsstatus emulieren.
In den nächsten Abschnitten erhalten Sie einen kurzen Überblick darüber, wie Sie die Standortbestimmung überschreiben und die Geräteausrichtung festlegen. Eine vollständige Liste der Funktionen finden Sie unter Gerätesensoren emulieren.
Standortbestimmung überschreiben
Um die Benutzeroberfläche zum Überschreiben der Standortbestimmung zu öffnen, klicken Sie auf Entwicklertools anpassen und steuern
und wählen dann Weitere Tools > Sensoren aus.
Oder drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), um das Befehlsmenü zu öffnen, geben Sie Sensors ein und wählen Sie Sensoren anzeigen aus.
Wählen Sie eine der Voreinstellungen aus der Liste Standort aus oder wählen Sie Andere... aus, um Ihre eigenen Koordinaten einzugeben, oder wählen Sie Standort nicht verfügbar aus, um zu testen, wie sich Ihre Seite verhält, wenn die Standortbestimmung einen Fehlerstatus hat.
Ausrichtung festlegen
Klicken Sie zum Öffnen der Benutzeroberfläche zur Ausrichtung auf Entwicklertools anpassen und steuern
und wählen Sie dann Weitere Tools > Sensoren aus.
Oder drücken Sie Befehlstaste + Umschalttaste + P (Mac) oder Strg + Umschalttaste + P (Windows, Linux, ChromeOS), um das Befehlsmenü zu öffnen, geben Sie Sensors ein und wählen Sie Sensoren anzeigen aus.
Wählen Sie eine der Voreinstellungen aus der Liste Ausrichtung aus oder wählen Sie Benutzerdefinierte Ausrichtung aus, um eigene Alpha-, Beta- und Gammawerte festzulegen.
