So verwenden Sie den mobilen Browser-Emulator in Chrome, Firefox, Edge und Opera

Müssen Sie auf einen Smartphone-Browser-Emulator auf Ihrem PC zugreifen, um die mobile Version einer Website zu testen, an der Sie interessiert sind? Vielleicht sind Sie ein Webentwickler oder möchten einer werden und müssen einen mobilen Browser für das Projekt, an dem Sie arbeiten, simulieren. Unabhängig von Ihren Gründen können Sie wie folgt auf einen mobilen Browser-Emulator in Google Chrome, Mozilla Firefox, Microsoft Edge und Opera zugreifen:

Inhalt

1. So aktivieren und verwenden Sie den mobilen Browser-Emulator in Google Chrome
2. So aktivieren und verwenden Sie den mobilen Browser-Emulator in Mozilla Firefox
3. Aktivieren und Verwenden des Emulators für mobile Browser in Microsoft Edge
4. So aktivieren und verwenden Sie den mobilen Browser-Emulator in Opera
5. Sind Sie mit den verfügbaren Emulationsoptionen für mobile Browser zufrieden?

So aktivieren und verwenden Sie den mobilen Browser-Emulator in Google Chrome

Navigieren Sie in Google Chrome zu der Website, die Sie im Emulator für mobile Browser anzeigen möchten. Drücken Sie dann entweder die Tasten STRG + UMSCHALT + I auf Ihrer Tastatur oder klicken Sie mit der Maus auf die drei vertikalen Punkte in der oberen rechten Ecke, um das Menü „Google Chrome anpassen und steuern“ zu öffnen. Wählen Sie Weitere Tools und dann Entwicklertools aus .

Greifen Sie in Google Chrome auf die Entwicklertools zu

Klicken oder tippen Sie auf die Schaltfläche „Gerätesymbolleiste umschalten“ (es sieht aus wie ein Smartphone neben einem Tablet) oder drücken Sie STRG + Umschalt + M auf Ihrer Tastatur. Dadurch wird die Gerätesymbolleiste aktiviert, in der die mobile Seite geladen wird. Standardmäßig verwendet die Gerätesymbolleiste eine Responsive - Vorlage für die von Ihnen geladene Website. Klicken Sie darauf und wählen Sie das Mobilgerät aus, das Sie emulieren möchten. Zu Ihren Optionen gehören viele iPhones, iPads, Surface Duo, zwei Samsung Galaxy-Geräte und ein Moto G4-Simulator für mobile Browser für den PC.

So aktivieren Sie den mobilen Browser-Emulator in Google Chrome

TIPP: Leider können Sie die Tastenkombination STRG + Umschalt + M erst verwenden, nachdem Sie die Entwicklertools aktiviert haben.

Navigieren Sie zu der Website, die Sie testen möchten, wechseln Sie zwischen den verschiedenen Smartphones und Tablets und sehen Sie, wie sie aussieht. Wenn Sie fertig sind, drücken Sie die Schaltfläche X (Schließen) in der oberen rechten Ecke der Entwicklertools von Google Chrome, um zum Standard-Desktop-Browsing-Modus zurückzukehren.

Schließen des mobilen Browser-Emulators Google Chrome

TIPP: Wenn Sie häufig Google Chrome nutzen, möchten Sie vielleicht auch lernen, wie Sie die Mediensteuerungsoptionen von Google Chrome verwenden .

So aktivieren und verwenden Sie den mobilen Browser-Emulator in Mozilla Firefox

Öffnen Sie in Mozilla Firefox die Website, für die Sie einen Simulator für mobile Browser verwenden möchten. Drücken Sie dann entweder STRG + Umschalt + M auf Ihrer Tastatur oder klicken Sie auf die Burger-Schaltfläche in der oberen rechten Ecke, um das Menü von Firefox zu öffnen, und wählen Sie Web Developer .

Greifen Sie in Firefox auf die Webentwickler-Tools zu

Sie sehen ein Menü mit Tools, die für Webentwickler nützlich sind. Wählen Sie in der Liste „Responsive Design Mode“ und dieser spezielle Modus zum Anzeigen einer Webseite wird in Firefox geladen.

Wählen Sie den Responsive Design-Modus in Firefox

Firefox aktiviert den Responsive Design Mode . Oben im Fenster sehen Sie die von diesem Emulationsmodus verwendeten Parameter. Wenn kein Gerät ausgewählt ist, klicken oder tippen Sie auf Responsive , um eine Dropdown-Liste mit Geräten zu öffnen, die für die Emulation verfügbar sind, und wählen Sie dann das Gerät aus, das Sie simulieren möchten.

Sie können den mobilen Browser für viele iPhones, das iPad, das Kindle Fire (Firefox ist der einzige Browser, der diese Emulationsoption anbietet) und Samsung Galaxy S9-Geräte simulieren.

Verwenden Sie den mobilen Browser-Emulator in Firefox

Wenn Sie mit dem Testen mit dem Smartphone-Browser-Emulator fertig sind, drücken Sie die Schaltfläche X (Responsive Design Mode schließen) in der oberen rechten Ecke von Mozilla Firefox.

Schließen Sie den mobilen Browser-Emulator in Firefox

Sie befinden sich wieder im Standard-Desktop-Browsing-Modus.

Aktivieren und Verwenden des Emulators für mobile Browser in Microsoft Edge

Microsoft Edge verwendet die gleiche Rendering-Engine wie Google Chrome und bietet die gleichen Smartphone-Browser-Emulatoren. Um darauf zuzugreifen, besuchen Sie die Website, die Sie testen möchten, und drücken Sie entweder die Tasten STRG + UMSCHALT + I auf Ihrer Tastatur oder klicken Sie auf die drei horizontalen Punkte ( „Einstellungen und mehr“ ) in der oberen rechten Ecke von Microsoft Edge. Gehen Sie im angezeigten Menü zu Weitere Tools und dann zu Entwicklertools .

Greifen Sie auf die Entwicklertools in Microsoft Edge zu

Klicken Sie auf die Schaltfläche „Geräteemulation umschalten“ (es sieht aus wie ein Smartphone neben einem Tablet) oder drücken Sie STRG + Umschalt + M auf Ihrer Tastatur. Dadurch wird die Symbolleiste des mobilen Browser-Emulators aktiviert. Standardmäßig wird eine Responsive- Vorlage für die von Ihnen geladene Website verwendet. Klicken Sie darauf und wählen Sie das Mobilgerät aus, das Sie emulieren möchten. Ihre Optionen umfassen die gleichen Smartphones und Tablets wie Google Chrome.

Greifen Sie in Microsoft Edge auf den mobilen Browser-Emulator zu

Durchsuchen Sie die Website, die Sie testen möchten, wechseln Sie zwischen den verschiedenen Mobilgeräten und sehen Sie, wie sie aussieht. Wenn Sie fertig sind, drücken Sie die Schaltfläche X (Schließen) in der oberen rechten Ecke von Microsoft Edge.

Schließen Sie den mobilen Browser-Emulator in Microsoft Edge

Sie befinden sich jetzt wieder im Standard-Desktop-Browsing-Modus.

So aktivieren und verwenden Sie den mobilen Browser-Emulator in Opera

Besuchen Sie in Opera die Webseite, die Sie anzeigen möchten, als ob Sie ein mobiles Gerät verwenden würden. Klicken Sie dann oben links auf das Opera-Symbol ( „Opera anpassen und steuern“ ). Wählen Sie im sich öffnenden Menü Developer gefolgt von Developer Tools . Wenn Sie die Tastatur bevorzugen, drücken Sie die Tasten STRG+UMSCHALT+I , um dasselbe Ergebnis zu erzielen.

Greifen Sie auf die Entwicklertools in Opera zu

Die Entwicklertools werden auf der rechten Seite des Browserfensters angezeigt. Klicken Sie auf die Schaltfläche „Gerätesymbolleiste umschalten“ (es sieht aus wie ein Smartphone neben einem Tablet) oder drücken Sie STRG + Umschalt + M auf Ihrer Tastatur. Die Gerätesymbolleiste wird auf der linken Seite angezeigt. Standardmäßig wird eine Responsive- Vorlage für die von Ihnen geladene Website verwendet. Klicken Sie darauf und wählen Sie das mobile Gerät, das Sie emulieren möchten, aus der Liste der Optionen aus. Opera bietet dieselben Emulatoren für mobile Browser wie Google Chrome und Microsoft Edge, da es auf derselben Rendering-Engine (Chromium) basiert.

Greifen Sie in Opera auf den mobilen Browser-Emulator zu

Wenn Sie mit dem Testen fertig sind, drücken Sie die Schaltfläche X (Schließen) in der oberen rechten Ecke, um zum Standard-Desktop-Browsing-Modus zurückzukehren.

Schließen Sie den mobilen Browser-Emulator in Opera

Sind Sie mit den verfügbaren Emulationsoptionen für mobile Browser zufrieden?

Jetzt wissen Sie, wie Sie alle Arten von Mobilgeräten in Ihrem bevorzugten Webbrowser emulieren können. Möglicherweise stellen Sie jedoch fest, dass die meisten Webbrowser dieselben Emulationsoptionen bieten, die iPhones und iPads bevorzugen. Wer ein modernes Android-Smartphone oder -Tablet emulieren möchte, hat selbst in Google Chrome – dem von der Firma hinter Android entwickelten Browser – recht geringe Chancen. Wenn Sie die besten Ergebnisse erzielen möchten, müssen Sie für diese Aufgabe möglicherweise zwei Browser verwenden: Chrome und Firefox oder Firefox und Edge oder Opera. Sagen Sie uns vor Ihrer Abreise, was Sie von den verfügbaren Optionen halten.