Mobilgeräte mit dem Gerätemodus simulieren

Im Gerätemodus können Sie das Erscheinungsbild und die Leistung Ihrer Seite auf einem Mobilgerät analysieren.

Übersicht

„Gerätemodus“ ist die Bezeichnung für eine Reihe von Funktionen in den Chrome-Entwicklertools, mit denen Sie Mobilgeräte zu simulieren. Zu den Funktionen gehören:

• Mobilen Darstellungsbereich simulieren
• CPU drosseln
• Netzwerk drosseln
• Zusätzlich führen Sie im Bereich Sensoren folgende Schritte aus: <ph type="x-smartling-placeholder">
  </ph>
  • Standortbestimmung simulieren
  • Ausrichtung festlegen

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 User Experience auf Ihrem Laptop oder Desktop-Computer.

Es gibt einige Aspekte von Mobilgeräten, die mit Entwicklertools nie simuliert werden können. Beispiel: Die Architektur mobiler CPUs unterscheidet sich stark von der von Laptops oder Desktop-CPUs. Im Zweifelsfall ist es am besten, Ihre Seite tatsächlich auf einem Mobilgerät zu veröffentlichen. Fernbedienung verwenden Debugging, um den Code einer Seite über Ihren Laptop oder Computer aufzurufen, zu ändern, zu debuggen und ein Profil zu erstellen auf einem Mobilgerät ausgeführt wird.

Gerätesymbolleiste öffnen

So öffnen Sie die Gerätesymbolleiste:

1. Öffnen Sie die Entwicklertools.
2. 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 bestimmte Werte ein in die Felder für Breite und Höhe ein. In diesem Beispiel ist die Breite auf 480 und die Höhe auf 415.

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

Um Haltepunkte für Medienabfragen über dem Darstellungsbereich anzeigen zu lassen, klicken Sie auf und dann auf Weitere Optionen > Medienabfragen anzeigen

In den Entwicklertools werden jetzt zwei zusätzliche Balken über dem Darstellungsbereich angezeigt:

• Die blaue Leiste mit max-width Haltepunkten
• Die orangefarbene Leiste mit min-width Haltepunkten

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:

1. Klicke auf Weitere Optionen > Pixel-Verhältnis des Geräts hinzufügen

   

2. 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 Computer zu simulieren.

Wenn Sie die Liste oben in der Aktionsleiste nicht sehen, wählen Sie Weitere Optionen aus. Gerätetyp hinzufügen

In der nächsten Tabelle werden die Unterschiede zwischen den Optionen beschrieben. Renderingmethode bezieht sich auf Gibt an, ob Chrome die Seite als mobilen oder Desktop-Darstellungsbereich rendert. Das Cursorsymbol bezieht sich auf den Typ des Cursors angezeigt, wenn Sie die Maus über die Seite bewegen. Ausgelöste Ereignisse bezieht sich darauf, ob die Seite ausgelöst wird. touch- oder click-Ereignisse, wenn Sie mit der Seite interagieren.

Option	Rendering-Methode	Cursorsymbol	Ausgelöste Ereignisse
Mobilgeräte	Mobilgeräte	Kreis	Touchscreen
Mobilgerät (keine Touchbedienung)	Mobilgeräte	Normal	Klick
Computer	Computer	Normal	Klick
Desktop (Touch)	Computer	Kreis	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 kontinuierliche Haltung bezieht sich auf eine „flache“ zusammengeklappt ist, 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 du die Abmessungen eines bestimmten Mobilgeräts wie Nest Hub simulieren möchtest, wähle Weitere Optionen > Geräterahmen anzeigen: Der Frame des physischen Geräts im Darstellungsbereich wird angezeigt.

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:

1. Klicken Sie auf die Liste Gerät und wählen Sie Bearbeiten aus.

   

2. Öffnen Sie die Einstellungen settings > Auf dem Tab Geräte können Sie entweder ein Gerät aus der Liste der unterstützten Geräte auswählen oder auf Benutzerdefiniertes Gerät hinzufügen klicken, um ein eigenes Gerät hinzuzufügen.

3. 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.

4. Wählen Sie im Darstellungsbereich das neu hinzugefügte Gerät aus der Liste Abmessungen aus.

Führungslinien anzeigen

Klicke auf Weitere Optionen > Lineal einblenden, um die Lineale 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

Um einen Screenshot des Darstellungsbereichs zu erstellen, klicken Sie auf und dann auf Weitere Optionen > Screenshot erstellen.

Wenn Sie einen Screenshot der gesamten Seite mit dem Inhalt erstellen möchten, der nicht im Darstellungsbereich sichtbar ist, wählen Sie im selben Menü Screenshot in Originalgröße erstellen aus.

Wenn Sie bei der Aufnahme eines Screenshots im Gerätespezifischen Modus einen Geräteframe einschließen möchten, wählen Sie zuerst Geräterahmen anzeigen aus und klicken Sie dann wie oben beschrieben auf Screenshot aufnehmen.

Weitere Möglichkeiten zum Erstellen von Screenshots mit den Entwicklertools finden Sie unter Vier Möglichkeiten zum Aufnehmen von Screenshots mit den Entwicklertools.

Netzwerk und CPU drosseln

Um sowohl das Netzwerk als auch die CPU zu drosseln, wählen Sie Mobiles mittlerer Stufe oder Low-End-Mobilgerät aus der Throttle (Throttle) ein.

Das Mittelklasse-Mobilgerät simuliert schnelles 3G und drosselt die CPU, sodass sie viermal langsamer ist als normal sein. Ein Low-End-Mobilgerät simuliert ein langsames 3G und drosselt die CPU sechsmal langsamer als normal. Notizen Die Drosselung bezieht sich auf die normale Funktion Ihres Laptops oder Desktops.

Hinweis: Wenn die Gerätesymbolleiste schmal ist, wird die Liste Throttle (Throttle) ausgeblendet.

Nur CPU drosseln

Um nur die CPU und nicht das Netzwerk zu drosseln, gehen Sie zum Bereich Leistung und klicken Sie auf Erfassen Einstellungen und Wählen Sie dann in der Liste CPU die Option 4 x langsamer, 6 x langsamer oder 20 x langsamer aus.

Nur Netzwerk drosseln

Um nur das Netzwerk und nicht die CPU zu drosseln, wählen Sie im Bereich Netzwerk die Option Schnelles 3G oder Slow 3G (Langsames 3G) aus der Liste Throttle (Throttle) aus.

Mit Befehl+Umschalt+P (Mac) bzw. Strg+Umschalt+P (Windows, Linux, ChromeOS) öffnen Sie den Befehl Geben Sie im Menü 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 Aufnahmeeinstellungen. und wählen Sie dann Schnelles 3G oder Langsames 3G aus der Liste der Netzwerke.

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

Klicke auf Entwicklertools anpassen und steuern, um die Benutzeroberfläche zum Überschreiben der Standortbestimmung zu öffnen. und wählen Sie Weitere Tools > Sensoren:

Mit Befehl+Umschalt+P (Mac) bzw. Strg+Umschalt+P (Windows, Linux, ChromeOS) öffnen Sie den Befehl Geben Sie im Menü 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 Ihren eigene Koordinaten festlegen oder Standort nicht verfügbar auswählen, um zu testen, wie sich Ihre Seite in einem Fehlerstatus ist.

Ausrichtung festlegen

Klicke auf Entwicklertools anpassen und steuern, um die Benutzeroberfläche für die Ausrichtung zu öffnen. und wählen Sie Weitere Tools > Sensoren:

Mit Befehl+Umschalt+P (Mac) bzw. Strg+Umschalt+P (Windows, Linux, ChromeOS) öffnen Sie den Befehl Geben Sie im Menü 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 die Ausrichtung festzulegen. Alpha-, Beta- und Gammawerte.