Emulieren mobiler Geräte (Geräteemulation)

Verwenden Sie das Geräteemulationstool , das auch als "Gerätemodus" bezeichnet wird, um sich anzunähern, wie Ihre Seite auf einem mobilen Gerät aussieht und reagiert.

DevTools bietet die folgenden Emulationsfeatures für mobile Geräte:

• Simulieren eines mobilen Viewports
• Drosselung des Netzwerks
• Cpu-Drosselung
• Außerkraftsetzung der Geolocation
• Ausrichtung festlegen
• Festlegen der Benutzer-Agent-Zeichenfolge
• Festlegen von Clienthinweisen für Den Benutzer-Agent

Einschränkungen

Die Geräteemulation ist eine Annäherung an das Aussehen und Verhalten Ihrer Seite auf einem mobilen Gerät in erster Ordnung . Die Geräteemulation führt Ihren Code nicht tatsächlich 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 nie emuliert. Beispielsweise unterscheidet sich die Architektur mobiler CPUs von der Architektur von Laptop- oder Desktop-CPUs. Im Zweifelsfall besteht das beste Suchergebnis darin, Ihre Seite tatsächlich auf einem mobilen Gerät auszuführen.

Verwenden Sie das Remotedebugging , 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 anzeigen, ändern, debuggen, profilieren oder alle vier. Ihr Computer kann ein Notizbuch oder ein Desktopcomputer sein.

Simulieren eines mobilen Viewports

Wählen Sie "Geräteemulation umschalten" ( umschalten) oder DevTools (...) > Geräteemulation anpassen und steuern, um die Benutzeroberfläche zu öffnen, mit der Sie einen mobilen Viewport simulieren können.

Standardmäßig wird die Gerätesymbolleiste im dynamischen Viewportmodus geöffnet.

Dynamischer Viewportmodus

Um das Aussehen und Verhalten Ihrer Seite schnell über mehrere Bildschirmgrößen hinweg zu testen, ziehen Sie die Ziehpunkte, um die Größe des Viewports auf die erforderlichen Abmessungen zu ändern. Sie können auch bestimmte Werte in die Felder für Breite und Höhe eingeben. In der folgenden Abbildung wird die Breite auf 626 und die Höhe auf 516festgelegt.

Medienabfragen anzeigen

Wenn Sie Medienabfragen auf Ihrer Seite definiert haben, springen Sie zu den Viewportabmessungen, in denen diese Medienabfragen wirksam werden, indem Sie Medienabfrage-Haltepunkte oberhalb des Viewports anzeigen. Wählen Sie "Weitere Optionen > " aus, um Medienabfragen anzuzeigen.

Wählen Sie einen Haltepunkt aus, um die Breite des Viewports so zu ändern, dass die Medienabfrage ausgelöst wird.

Festlegen des Gerätetyps

Verwenden Sie die Gerätetypliste , um ein mobiles Gerät oder Desktopgerät zu simulieren.

In der folgenden Tabelle werden die Unterschiede zwischen den verfügbaren Gerätetypoptionen beschrieben. Die Renderingmethodenspalte bezieht sich darauf, ob Microsoft Edge die Seite als mobilen oder Desktop-Viewport rendert. Die Cursorsymbolspalte bezieht sich auf den Cursortyp, der angezeigt wird, wenn Sie auf die Seite zeigen. Die Spalte "Ereignisse ausgelöst" bezieht sich darauf, ob die Seite bei der Interaktion mit der Seite ausgelöst touch wird oder click ereignisse.

Option	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

Hinweis

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

Ansichtsmodus für mobile Geräte

Um die Abmessungen 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.

2. Erhöhen Sie bei Bedarf die Breite der Gerätesymbolleiste, um auf die Schaltfläche "Drehen" zuzugreifen.

   

Siehe auch "Ausrichtung festlegen" weiter unten.

Geräteframe anzeigen

Um die Abmessungen eines bestimmten mobilen Geräts zu simulieren, öffnen Sie "Weitere Optionen" , und wählen Sie dann " Geräteframe anzeigen " aus, um den physischen Geräteframe um den Viewport anzuzeigen.

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

Der Geräterahmen für das iPhone 6:

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. Wählen Sie die Geräteliste > Bearbeiten aus.

   

2. Wählen Sie "Benutzerdefiniertes Gerät hinzufügen" aus.

3. Geben Sie auf emulierten Geräten einen Gerätenamen, eine Bildschirmbreite und eine Bildschirmhöhe für das benutzerdefinierte Gerät ein. Das Pixelverhältnis des Geräts, die Benutzer-Agent-Zeichenfolge und die Gerätetypfelder sind optional. Das Feld "Gerätetyp" ist standardmäßig "Mobil".

   

Lineale anzeigen

Wenn Sie Bildschirmabmessungen messen müssen, können Sie lineale verwenden, um die Bildschirmgröße in Pixeln zu messen. Wählen Sie "Weitere Optionen > " aus: Lineale anzeigen, um Lineale oberhalb und links neben dem Viewport anzuzeigen.

Lineale werden oberhalb und links neben dem Viewport angezeigt:

Zoomen des Viewports

Verwenden Sie die Zoomliste , um das Aussehen und Verhalten Ihrer Seite auf mehreren Zoomstufen zu testen, um sie zu vergrößern oder zu verkleinern.

Drosselung von Netzwerk und CPU

Mobile Geräte weisen häufig Netzwerk- und CPU-Einschränkungen auf. Testen Sie, wie schnell Ihre Seite geladen wird und wie sie bei unterschiedlichen Internet- und CPU-Geschwindigkeiten reagiert.

1. Wählen Sie die Liste "Drosselung" aus, und ändern Sie die Voreinstellung in mobile Mid-Tier****- oder Low-End-Geräte.

   • Mid-Tier Mobile simuliert fast 3G und drosselt Ihre CPU. Sie ist viermal langsamer als normal.
   • Low-End Mobile simuliert slow 3G und drosselt Ihre CPU. Er ist sechsmal langsamer als normal.

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

   

   Wenn die Liste "Drosselung" ausgeblendet ist, ist ihre Gerätesymbolleiste zu schmal.

2. Erhöhen Sie bei Bedarf die Breite der Gerätesymbolleiste, um auf die Drosselungsliste zuzugreifen.

   

Nur CPU drosseln

So drosseln Sie nur die CPU und nicht das Netzwerk:

1. Wählen Sie den Bereich "Leistung " und dann "Aufnahmeeinstellungen " () aus.

2. Wählen Sie cpu > 4x Verlangsamung oder 6x Verlangsamung.

   

Nur Netzwerk drosseln

So drosseln Sie nur das Netzwerk und nicht die CPU:

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

   

   Oder drücken Ctrl+Shift+P Sie (Windows, Linux) oder Command``P++Shift(macOS), um das Befehlsmenü zu öffnen, beginnen Sie mit der Eingabe3g, und wählen Sie dann "Schnelle 3G-Drosselung aktivieren" oder "Langsame 3G-Drosselung aktivieren" aus.

   

Sie können die Netzwerkdrosselung auch über den Bereich "Leistung " festlegen:

1. Wählen Sie "Aufnahmeeinstellungen " () und dann die Netzwerkliste aus, und ändern Sie die Voreinstellung in "Fast 3G " oder "Slow 3G".

   

Außerkraftsetzung der Geolocation

Wenn Ihre Seite von Geolocation-Informationen eines mobilen Geräts abhängig ist, um ordnungsgemäß gerendert zu werden, stellen Sie unterschiedliche Geolocations mithilfe der geolocationüberschreibenden Benutzeroberfläche bereit.

1. Wählen Sie "Anpassen" aus, und steuern Sie DevTools (...) > Weitere Tools > Sensoren.

   

   Oder öffnen Sie das Befehlsmenü Ctrl++Shift``P , indem Sie (Windows, Linux) oderP Command+Shift+(macOS) auswählen. Geben Sie Sensors ein, und wählen Sie dann "Sensoren anzeigen" aus.

   

Verwenden Sie im Bereich "Sensoren " das Dropdownmenü " Speicherort ", um einen der voreingestellten Speicherorte auszuwählen. Um einen benutzerdefinierten Speicherort einzugeben, wählen Sie "Sonstige " aus, und geben Sie die Koordinaten Ihres benutzerdefinierten Speicherorts ein. Um zu testen, wie sich Ihre Seite verhält, wenn Standortinformationen nicht verfügbar sind, wählen Sie "Speicherort nicht verfügbar" aus.

Ausrichtung festlegen

Wenn Ihre Seite zum ordnungsgemäßen Rendern von Ausrichtungsinformationen von einem mobilen Gerät abhängt, öffnen Sie die Ausrichtungs-UI.

1. Wählen Sie "Anpassen" aus, und steuern Sie DevTools (...) > Weitere Tools > Sensoren.

   

   Oder öffnen Sie das Befehlsmenü, indem Sie (Windows, Linux) oderP Command++Shift(macOS) drücken.Ctrl+Shift+P Geben Sie Sensorsein, und wählen Sie dann "Sensoren anzeigen" aus.

   

   Im Bereich "Sensoren " können Sie im Dropdownmenü " Ausrichtung " eine voreingestellte Ausrichtung auswählen.

2. Um Ihre eigene Ausrichtung einzugeben, wählen Sie "Benutzerdefinierte Ausrichtung" aus, und geben Sie Ihre eigenen Alpha-, Beta- und Gammawerte ein.

   

Festlegen der Benutzer-Agent-Zeichenfolge

Wenn Ihre Seite von der Benutzer-Agent-Zeichenfolge eines mobilen Geräts abhängig ist, um ordnungsgemäß gerendert zu werden, verwenden Sie den Bereich "Netzwerkbedingungen ", um unterschiedliche Zeichenfolgen für den Benutzer-Agent bereitzustellen.

1. Wählen Sie "Anpassen" aus, und steuern Sie DevTools (...) > Weitere Tools > Netzwerkbedingungen.

   

   Oder öffnen Sie das Befehlsmenü, indem Sie (Windows, Linux) oderP Command++Shift(macOS) drücken.Ctrl+Shift+P Geben Sie Network conditionsein, und wählen Sie "Netzwerkbedingungen anzeigen" aus.

   

2. Deaktivieren Sie neben dem Benutzer-Agent das Kontrollkästchen "Browserstandard verwenden ".

3. Wählen Sie "Benutzerdefiniert " aus, um aus einer Liste vordefinierter Benutzer-Agent-Zeichenfolgen auszuwählen.

4. Um eine eigene Benutzer-Agent-Zeichenfolge einzugeben, geben Sie die Zeichenfolge unter "Eingabe eines benutzerdefinierten Benutzer-Agents" ein.

   

Weitere Informationen

• Außerkraftsetzung der Benutzer-Agent-Zeichenfolge

Festlegen von Clienthinweisen für Den Benutzer-Agent

Wenn Ihre Website Benutzer-Agent-Clienthinweise verwendet, verwenden Sie den Bereich " Emulated Devices ", um Geräte hinzuzufügen und Clienthinweise für Den Benutzer-Agent festzulegen.

1. Klicken Sie mit der rechten Maustaste auf eine Webseite, und wählen Sie dann "Überprüfen" aus.

2. Wählen Sie "Geräteeinstellungen" > aus.

3. Wählen Sie im Bereich "Emulated Devices" die Option "Benutzerdefiniertes Gerät hinzufügen" aus, und erweitern Sie die Clienthinweise für den Benutzer-Agent.

   

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

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

6. Festlegen von Clienthinweisen für Den Benutzer-Agent wie folgt:

   • 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 , z. B. 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 Benutzer-Agent festlegen oder ändern. Es sind keine erforderlichen Werte vorhanden.

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

Sie können auch Clienthinweise für Benutzer-Agent 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 Originalseite befindet sich hier und wurde von Kayce Basken (Technical Writer, Chrome DevTools & Lighthouse) verfasst.

Diese Arbeit unterliegt einer Creative Commons Attribution 4.0 International License.