Emulieren mobiler Geräte (Geräteemulation)

Verwenden Sie das Tool Geräteemulation , das auch als Gerätemodus bezeichnet wird, um ungefähr zu ermitteln, wie Ihre Seite auf einem mobilen Gerät aussieht und sich verhält.

Bei der Geräteemulation handelt es sich um eine Annäherung an das Aussehen und Verhalten Ihrer Seite auf einem mobilen Gerät. Die Geräteemulation führt Ihren Code nicht wirklich auf einem mobilen Gerät aus. Stattdessen simulieren Sie die mobile Benutzeroberfläche von Ihrem Laptop oder Desktop aus.

Einige Aspekte mobiler Geräte werden in DevTools nicht emuliert. Beispielsweise unterscheidet sich die Architektur mobiler CPUs von der Architektur von Laptop- oder Desktop-CPUs. Führen Sie Ihre Seite auf einem mobilen Gerät aus, um die zuverlässigsten Tests durchzuführen.

Verwenden Sie Remotedebuggen , um mit dem Code einer Seite von Ihrem Computer aus zu interagieren, während Ihre Seite tatsächlich auf einem mobilen Gerät ausgeführt wird. Sie können während der Interaktion mit dem Code alle vier Anzeigen, Ändern, Debuggen, Profile oder alle vier anzeigen. Ihr Computer kann ein Notebook oder ein Desktopcomputer sein.

Ausführlicher Inhalt:

• Simulieren eines mobilen Viewports
  • Reaktionsfähiger Viewportmodus
    • Anzeigen von Medienabfragen
    • Festlegen des Gerätetyps
  • Viewportmodus für mobile Geräte
    • Drehen des Viewports in querformat
    • Geräterahmen anzeigen
    • Hinzufügen eines benutzerdefinierten mobilen Geräts
  • Lineale anzeigen
  • Vergrößern des Viewports
• Drosseln des Netzwerks und der CPU
  • Drosseln nur der CPU
  • Nur das Netzwerk drosseln
• Emulieren von Sensoren
  • Außerkraftsetzung der Geolocation
  • Festlegen der Ausrichtung
• Festlegen der Benutzer-Agent-Zeichenfolge
• Festlegen von Clienthinweisen für Den Benutzer-Agent

Simulieren eines mobilen Viewports

So öffnen Sie die Benutzeroberfläche, mit der Sie einen mobilen Viewport simulieren können:

1. Öffnen Sie DevTools. Klicken Sie beispielsweise mit der rechten Maustaste auf eine Webseite, und wählen Sie dann Untersuchen aus.

2. Klicken Sie in der Aktivitätsleiste auf die Schaltfläche Geräteemulation umschalten (). Oder wählen Sie in DevTools anpassen und steuern DevTools (...) >Device Emulation aus:

   

   Die Webseite wird im Bereich Geräteemulation gerendert. Die Gerätesymbolleiste wird im Modus "Responsive Viewport" geöffnet.

Reaktionsfähiger Viewportmodus

Ziehen Sie die Ziehpunkte, um schnell das Aussehen und Verhalten ihrer Seite über mehrere Bildschirmgrößen hinweg zu testen, um die Größe des Viewports in die gewünschten Abmessungen zu ändern. Sie können beliebige numerische Werte in die Felder Breite und Höhe eingeben. Wenn Sie eine Größe auswählen, die größer als im Browserfenster verfügbar ist, wird der Viewport automatisch skaliert, um den größeren Viewport zu berücksichtigen.

Im folgenden Beispiel wird die Viewportbreite auf 400 und die Höhe auf 736festgelegt:

Wenn Sie mehr Platz auf dem Bildschirm benötigen, können Sie ändern, wo DevTools im Browserfenster angedockt ist. Weitere Informationen finden Sie unter Ändern der DevTools-Platzierung (Ausdocken, Andocken nach unten, Andocken auf der linken Seite).

Anzeigen von Medienabfragen

Wenn Sie Medienabfragen auf Ihrer Seite definiert haben, wechseln Sie zu den Viewportdimensionen, in denen diese Medienabfragen wirksam werden, indem Sie Medienabfragehaltepunkte über Ihrem Viewport anzeigen. Wählen Sie Weitere Optionen (>Medienabfragen anzeigen aus.

Eine CSS-Medienabfrage definiert einen Haltepunkt, bei dem es sich um eine Browser-Viewportbreite handelt. Eine Webseite kann ein reaktionsfähiges Layout für jeden Haltepunkt (Viewportbreite) definieren, den das CSS der Webseite definiert.

Medienabfragen können verwendet werden, um das Layout einer Seite zu ändern, wenn der Viewport des Geräts, auf dem die Webseite angezeigt wird, über oder unter einer bestimmten Breite liegt. Mit Medienabfragen können Sie Code schreiben, der für das Seitenlayout verwendet werden soll, wenn die Bildschirmbreite unter einer bestimmten Größe oder über einer bestimmten Größe oder innerhalb einer Mininum- und maximaler Größe liegt.

So zeigen Sie Medienabfragehaltepunkte über dem Viewport an:

1. Klicken Sie auf die Schaltfläche Weitere Optionen (), und wählen Sie dann Medienabfragen anzeigen aus:

   

   Wenn max-width - oder min-width -Haltepunkte von der Webseite definiert werden, zeigt DevTools zusätzliche Balken über dem Viewport an:

   • Der blaue Balken entspricht max-width Medienabfragen.
   • Der grüne Balken entspricht Medienabfragen, die sowohl als max-widthauch min-width verwenden.
   • Der orangefarbene Balken entspricht min-width Medienabfragen.

   

2. Um die Breite des Viewports so zu ändern, dass die Medienabfrage für diesen Haltepunkt verwendet wird, klicken Sie auf ein Haltepunktrechteck in der Haltepunktleiste. Die Breite des Viewports ändert sich, sodass der Haltepunkt ausgelöst wird und das Webseitenlayout aktualisiert wird.

3. Um zur entsprechenden @media Deklaration im Code für die Webseite zu wechseln, klicken Sie mit der rechten Maustaste zwischen vertikalen Haltepunktleisten, und wählen Sie dann Im Quellcode anzeigen aus. DevTools öffnet das Tool Quellen und zeigt die entsprechende @media Zeile im Editor an.

Siehe auch:

• Debuggen von Medienabfragen unter Erste Schritte zum Anzeigen und Ändern von CSS.

Festlegen des Pixelverhältnisses des Geräts

Device Pixel Ratio (DPR) ist das Verhältnis zwischen physischen Pixeln auf dem Hardwarebildschirm und logischen Pixeln (CSS). Anders ausgedrückt: DPR teilt dem Browser mit, wie viele Bildschirmpixel zum Zeichnen eines CSS-Pixels verwendet werden sollen. Microsoft Edge verwendet den DPR-Wert beim Zeichnen auf HiDPI-Displays (High Dots Per Inch).

So legen Sie ein Gerätepixelverhältnis fest:

1. Wählen Sie Weitere Optionen (>Pixelverhältnis des Geräts hinzufügen aus:

   

   Oben im Viewport wird eine DPR-Dropdownliste hinzugefügt.

2. Wählen Sie in der Dropdownliste DPR einen DPR-Wert (1, 2 oder 3) aus. Der Standardwert ist 2.

So entfernen Sie das Pixelverhältnis des Geräts:

• Wählen Sie Weitere Optionen (") > aus.Entfernen Sie das Pixelverhältnis des Geräts.

Festlegen des Gerätetyps

Verwenden Sie zum Simulieren eines mobilen Geräts oder Desktopgeräts die Liste Gerätetyp :

Wenn die Liste Gerätetyp nicht angezeigt wird, wählen Sie Weitere Optionen>Gerätetyp hinzufügen aus.

Die Liste Gerätetyp enthält die folgenden Gerätetypen:

Gerätetyp	Renderingmethode	Cursorsymbol	Ausgelöste Ereignisse
Mobilgeräte	Mobilgeräte	Kreis	touch
Mobil (ohne Toucheingabe)	Mobilgeräte	Normal	click
Desktop	Desktop	Normal	click
Desktop (Toucheingabe)	Desktop	Kreis	touch

Schlüssel für Spalten in der obigen Tabelle:

Spalte	Beschreibung
Renderingmethode	Gibt an, ob Microsoft Edge die Seite als mobiles oder desktopseitiges Viewport rendert.
Cursorsymbol	Welcher Cursortyp wird angezeigt, wenn Sie mit dem Mauszeiger auf die Seite zeigen.
Ausgelöste Ereignisse	Gibt an, ob die Seite oder Ereignisse auslöst touchclick , wenn Sie mit der Seite interagieren.

Viewportmodus für mobile Geräte

Um die Dimensionen eines bestimmten mobilen Geräts zu simulieren, wählen Sie das Gerät aus der Geräteliste aus:

Drehen des Viewports in querformat

Testen Sie Ihre Webseite im Querformat.

1. Um den Viewport im Querformat zu drehen, wählen Sie Drehen () aus:

   

   Die Schaltfläche Drehen wird ausgeblendet, wenn die Gerätesymbolleiste schmal ist.

Weitere Informationen finden Sie weiter unten unter Festlegen der Ausrichtung.

Geräterahmen anzeigen

Klicken Sie zum Simulieren der Abmessungen eines bestimmten mobilen Geräts auf Weitere Optionen (), und wählen Sie dann Geräterahmen anzeigen aus, um den physischen Geräterahmen um den Viewport anzuzeigen:

Wenn für ein bestimmtes Gerät kein Geräterahmen angezeigt wird, bedeutet dies, dass DevTools keine Grafik für dieses Gerät hat.

Der Geräterahmen für das iPhone 6/7/8:

Hinzufügen eines benutzerdefinierten mobilen Geräts

Wenn die benötigte Option für mobile Geräte nicht in der Standardliste enthalten ist, können Sie ein benutzerdefiniertes Gerät hinzufügen.

So fügen Sie ein benutzerdefiniertes Gerät hinzu:

1. Klicken Sie in DevTools auf die Schaltfläche Geräteemulation umschalten (, um die Geräteemulation zu aktivieren.

2. Wählen Sie in der Geräte-Dropdownliste auf der linken Seite das Menüelement Bearbeiten aus:

3. Wählen Sie die Geräteliste>Bearbeiten aus:

   

   Die Seite DevTools-Einstellungen>Geräte (emulierte Geräte) wird geöffnet.

4. Klicken Sie auf die Schaltfläche Benutzerdefiniertes Gerät hinzufügen . Auf der Seite Emulated Devices (Emulierte Geräte ) in den Einstellungen wird oben ein Abschnitt Gerät hinzugefügt:

   Das Pixelverhältnis des Geräts, die Benutzer-Agent-Zeichenfolge und die Gerätetypfelder sind optional. Der Gerätetyp lautet standardmäßig Mobil:

   

5. Geben Sie im Abschnitt Gerät in den Textfeldern einen Gerätenamen, eine Bildschirmbreite und eine Bildschirmhöhe für das benutzerdefinierte Gerät ein.

6. Füllen Sie optional die folgenden Felder aus:

   • Pixelverhältnis des Geräts. Siehe Festlegen des Gerätepixelverhältnisses oben; und Window: devicePixelRatio-Eigenschaft bei MDN.

   • Benutzer-Agent-Zeichenfolge. Siehe Festlegen der Benutzer-Agent-Zeichenfolge unten. und Benutzer-Agent bei MDN.

   • Benutzer-Agent-Typ (Gerätetyp). Siehe Festlegen des Gerätetyps oben. Der Standardwert ist "Mobil".

7. Klicken Sie auf die Schaltfläche Hinzufügen. Das neue Gerät ist jetzt in der Geräte-Dropdownliste oben links im Geräteemulator verfügbar.

So entfernen Sie ein benutzerdefiniertes Gerät:

• Zeigen Sie in DevTools >Settings>Devices (Emulated Devices) auf den namen des benutzerdefinierten Geräts, und klicken Sie dann auf das Papierkorbsymbol.

Lineale anzeigen

Wenn Sie bildschirmdimensionen messen müssen, können Sie Lineale verwenden, um die Bildschirmgröße in Pixel zu messen.

So zeigen Sie Lineale über und links neben Ihrem Viewport an:

• Wählen Sie Weitere Optionen (>Lineale anzeigen aus:

  

  Lineale werden über und links neben dem Viewport angezeigt und geben die Abmessungen in Pixel an:

  

Vergrößern des Viewports

Um das Erscheinungsbild ihrer Seite mit mehreren Zoomstufen zu testen, verwenden Sie die Zoomliste zum Vergrößern oder Verkleineren.

Screenshot aufnehmen

Um einen Screenshot der derzeit im Viewport angezeigten Elemente aufzunehmen, klicken Sie auf Weitere Optionen (") >Screenshot aufzeichnen:

Um einen Screenshot der gesamten Seite mit dem Inhalt aufzunehmen, der derzeit nicht im Viewport sichtbar ist, wählen Sie Screenshot in voller Größe im selben Menü erfassen aus.

Drosseln des Netzwerks und der CPU

Mobile Geräte weisen häufig Netzwerk- und CPU-Einschränkungen auf.

So testen Sie, wie schnell Ihre Seite geladen wird und wie sie bei unterschiedlichen Internet- und CPU-Geschwindigkeiten reagiert:

• Ändern Sie in der Liste Drosselung die Voreinstellung in Mid-Tier Mobile oder Low-End Mobile:

  

  Wenn die Drosselungsliste ausgeblendet ist, erweitern Sie die Gerätesymbolleiste.

• Mid-Tier Mobile simuliert fast 3G und drosselt Ihre CPU. Es ist viermal langsamer als normal.

• Low-End-Mobilgeräteslow 3G simulieren und drosseln Ihre CPU. Es ist sechsmal langsamer als normal.

Die gesamte Drosselung basiert auf der normalen Funktion Ihres Laptops oder Desktops.

Drosseln nur der CPU

So drosseln Sie nur die CPU und nicht das Netzwerk:

1. Wählen Sie in DevTools das Leistungstool aus.

2. Klicken Sie oben rechts auf die Schaltfläche Einstellungen erfassen (

3. Wählen Sie in der Dropdownliste CPU die Option 4x Verlangsamung oder 6x Verlangsamung aus:

   

Nur das Netzwerk drosseln

So drosseln Sie nur das Netzwerk und nicht die CPU:

1. Wählen Sie das Tool Netzwerk und dann Online>Fast 3G oder Slow 3G aus.

   

   Oder drücken Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen, mit der Eingabe 3gzu beginnen, und wählen Sie dann Schnelle 3G-Drosselung aktivieren oder Langsame 3G-Drosselung aktivieren aus.

   

Sie können die Netzwerkdrosselung auch im Leistungstool festlegen:

1. Wählen Sie Aufnahmeeinstellungen () und dann die Liste Netzwerk aus, und ändern Sie die Voreinstellung in Schnelles 3G oder Langsames 3G.

   

Emulieren von Sensoren

Verwenden Sie die Registerkarte Sensoren , um die Geolocation außer Kraft zu setzen, die Geräteausrichtung zu simulieren, die Toucheingabe zu erzwingen und den Leerlaufzustand zu emulieren.

In den folgenden Abschnitten erfahren Sie, wie Sie die Geolocation außer Kraft setzen und die Geräteausrichtung festlegen.

Außerkraftsetzung der Geolocation

Verwenden Sie das Sensortool , um die Geolocation zu überschreiben und die Geräteausrichtung zu simulieren.

Außerkraftsetzung der Geolocation

Wenn Ihre Seite von geolocation-Informationen von einem mobilen Gerät abhängig ist, um sie ordnungsgemäß zu rendern, stellen Sie unterschiedliche Geolocations mithilfe der Benutzeroberfläche zur Geolocationüberschreibung bereit.

1. Klicken Sie in der Aktivitätsleiste auf die Schaltfläche Weitere Tools () und dann auf Sensoren:

   

   Oder öffnen Sie das Befehlsmenü, indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken. Geben Sie ein Sensors , und wählen Sie dann Sensoren anzeigen aus:

   

2. Wählen Sie das Dropdownmenü Speicherort und dann einen der voreingestellten Speicherorte aus:

   

Um einen benutzerdefinierten Standort einzugeben, wählen Sie Andere aus, und geben Sie die Koordinaten Ihres benutzerdefinierten Standorts ein.

Um zu testen, wie sich Ihre Seite verhält, wenn Standortinformationen nicht verfügbar sind, wählen Sie Standort nicht verfügbar aus.

Siehe auch:

• Außerkraftsetzen der Geolocation mit dem Sensortool

Festlegen der Ausrichtung

Wenn Ihre Seite von den Ausrichtungsinformationen eines mobilen Geräts abhängig ist, um sie ordnungsgemäß zu rendern, öffnen Sie die Ausrichtungs-UI.

So legen Sie die Geräteausrichtung fest:

1. Klicken Sie in der Aktivitätsleiste auf die Schaltfläche Weitere Tools () und dann auf Sensoren:

   

   Oder öffnen Sie das Befehlsmenü, indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken. Geben Sie ein Sensors, und wählen Sie dann Sensoren anzeigen aus:

   

2. Wählen Sie im Dropdownmenü Ausrichtung eine voreingestellte Ausrichtung aus.

   Alternativ können Sie ihre eigene Ausrichtung eingeben, wählen Sie Benutzerdefinierte Ausrichtung aus, und geben Sie Ihre eigenen Alpha-, Beta- und Gammawerte ein:

   

Siehe auch:

• Simulieren der Geräteausrichtung mit dem Sensortool

Festlegen der Benutzer-Agent-Zeichenfolge

Wenn Ihre Seite von der Benutzer-Agent-Zeichenfolge eines mobilen Geräts abhängig ist, um sie ordnungsgemäß zu rendern, verwenden Sie das Tool Netzwerkbedingungen , um eine andere Benutzer-Agent-Zeichenfolge anzugeben.

So legen Sie die Zeichenfolge des Benutzer-Agents fest:

1. Wählen Sie Weitere Tools (+) >Netzwerkbedingungen aus:

   

   Oder öffnen Sie das Befehlsmenü, indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken. Geben Sie ein Network conditions, und wählen Sie Netzwerkbedingungen anzeigen aus:

   

2. Deaktivieren Sie im Abschnitt Benutzer-Agent des Tools für Netzwerkbedingungen das Kontrollkästchen Browserstandard verwenden .

3. Um eine Liste vordefinierter Benutzer-Agent-Zeichenfolgen auszuwählen, klicken Sie auf das Menü, in dem zunächst Benutzerdefiniert angezeigt wird.

   Oder geben Sie die Zeichenfolge in das Textfeld Benutzerdefinierten Benutzer-Agent eingeben ein, um ihre eigene Benutzer-Agent-Zeichenfolge einzugeben:

   

Siehe auch:

• Außerkraftsetzung der Benutzer-Agent-Zeichenfolge

Festlegen von Clienthinweisen für Den Benutzer-Agent

Wenn An Ihrem Standort Clienthinweise vom Benutzer-Agent verwendet werden, verwenden Sie das Tool Emulierte Geräte , um Geräte hinzuzufügen und Benutzer-Agent-Clienthinweise festzulegen:

1. Klicken Sie mit der rechten Maustaste auf eine Webseite, und wählen Sie dann Untersuchen aus.

2. Wählen Sie Einstellungen>Geräte aus. Die Seite Emulated Devices (Emulierte Geräte ) der Einstellungen wird geöffnet.

3. Klicken Sie auf die Schaltfläche Benutzerdefiniertes Gerät hinzufügen , und erweitern Sie benutzer-agent-Clienthinweise:

   

4. Geben Sie einen eindeutigen Namen in das Textfeld Gerätename ein, z Test101. B. .

5. Übernehmen Sie die Standardwerte, oder ändern Sie die Breite, Höhe und das Pixelverhältnis des Geräts nach Bedarf.

6. Legen Sie Benutzer-Agent-Clienthinweise wie folgt fest:

   • Marke und Version, z. B. Edge und 92. Wählen Sie + Marke hinzufügen aus, um mehrere Marken- und Versionspaare hinzuzufügen.
   • Vollständige Browserversion wie 92.0.1111.0.
   • Plattform und Version wie Windows und 10.0.
   • Architektur wie x86.
   • Gerätemodell wie Galaxy Nexus.

   Sie können alle Clienthinweise für den Benutzer-Agent festlegen oder ändern. Es sind keine erforderlichen Werte vorhanden.

7. Klicken Sie auf Hinzufügen. Das neue Gerät wird im ausgewählten Zustand oben in der Liste Emulierte Geräte angezeigt.

Sie können auch Benutzer-Agent-Clienthinweise im Netzwerktool festlegen. Siehe Referenz zu Netzwerkfeatures.

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.