Mobilgeräte mit dem Gerätemodus simulieren

Sofia Emelianova
Sofia Emelianova

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:

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.

Ein/Aus-Schaltfläche der Gerätesymbolleiste

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.

Gerätesymbolleiste

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.

Die Ziehpunkte zum Ändern der Abmessungen des Darstellungsbereichs im Modus „Responsiver Darstellungsbereich“.

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:

Die Leiste für die Breitenvoreinstellungen.

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 Weitere Optionen und dann auf Weitere Optionen > Medienabfragen anzeigen

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.

Klicken Sie zwischen die Haltepunkte, um die Breite des Darstellungsbereichs zu ändern.

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.

Im Dropdown-Menü Quellcode anzeigen.

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 Weitere Optionen > Pixel-Verhältnis des Geräts hinzufügen

    Pixelverhä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.

    DPR-Wert festlegen

Gerätetyp festlegen

Verwenden Sie die Liste Device Type (Gerätetyp), um ein Mobilgerät oder Computer zu simulieren.

Die Liste „Gerätetyp“.

Wenn Sie die Liste oben in der Aktionsleiste nicht sehen, wählen Sie Weitere Optionen 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.

OptionRendering-MethodeCursorsymbolAusgelöste Ereignisse
MobilgeräteMobilgeräteKreisTouchscreen
Mobilgerät (keine Touchbedienung)MobilgeräteNormalKlick
ComputerComputerNormalKlick
Desktop (Touch)ComputerKreisTouchscreen

Gerätespezifischer Modus

Wenn Sie die Abmessungen eines bestimmten Mobilgeräts simulieren möchten, wählen Sie es in der Liste Abmessungen aus.

Die Liste „Dimensionen“

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.

Querformat

Hinweis: Wenn die Gerätesymbolleiste schmal ist, wird die Schaltfläche Drehen Drehen ausgeblendet.

Gerätesymbolleiste

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.

Der Dual-Screen-Modus ist aktiviert.

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.

Sicherheitsstatus auf „Zugeklappt“ eingestellt.

Geräterahmen anzeigen

Wenn du die Abmessungen eines bestimmten Mobilgeräts wie Nest Hub simulieren möchtest, wähle Weitere Optionen Weitere Optionen > Geräterahmen anzeigen: Der Frame des physischen Geräts im Darstellungsbereich wird angezeigt.

Geräterahmen anzeigen.

In diesem Beispiel wird in den Entwicklertools der Frame für Nest Hub angezeigt.

Der Geräterahmen für Nest Hub.

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.

    Bearbeiten.

  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.

    Benutzerdefiniertes Gerät erstellen

    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 Weitere Optionen > Lineal einblenden, um die Lineale zu sehen. Die Größeneinheit der Lineale sind Pixel.

Lineale einblenden.

In den Entwicklertools werden Lineale oben und links neben dem Darstellungsbereich angezeigt.

Führungslinien über und links vom Darstellungsbereich.

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.

Zoom aus, wenn Sie sich einen Teil der Karte genauer ansehen möchten.

Screenshot erstellen

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

Die Option „Screenshot erstellen“ im Menü „Weitere Optionen“

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.

Mache einen Screenshot mit einem Geräterahmen.

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.

Die Throttle-Liste.

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 Aufnahmeeinstellungen. und Wählen Sie dann in der Liste CPU die Option 4 x langsamer, 6 x langsamer oder 20 x langsamer aus.

Die CPU-Liste.

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.

Die Throttle-Liste.

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.

Das Befehlsmenü.

Sie können die Netzwerkdrosselung auch im Bereich Leistung festlegen. Klicken Sie auf Aufnahmeeinstellungen. Aufnahmeeinstellungen. und wählen Sie dann Schnelles 3G oder Langsames 3G aus der Liste der Netzwerke.

Netzwerkdrosselung im Bereich „Leistung“ festlegen

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. Entwicklertools anpassen und verwalten. und wählen Sie Weitere Tools > Sensoren:

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.

Sensoren anzeigen

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.

Geolocation

Ausrichtung festlegen

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

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.

Sensoren anzeigen

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.

Ausrichtung