Lernprogramm

So emulieren Sie ein mobiles Gerät in einem Desktop-Browser (Chrome, Firefox, Opera, Edge und Internet Explorer)

Es gibt Websites, die mehr Optionen und Funktionen bieten, wenn sie auf mobilen Geräten besucht werden. Wenn dies geschieht und Sie einen Desktop-Browser verwenden, sind Sie aufgrund der eingeschränkten Benutzerfreundlichkeit frustriert. In anderen Fällen möchten Sie möglicherweise testen und sehen, wie eine Website auf einem bestimmten mobilen Gerät wie dem iPhone, dem iPad oder einem Pixel 2-Smartphone aussieht. So können Sie eine mobile Website auf einem Desktop-PC anzeigen (und testen):

HINWEIS: Dieses Handbuch behandelt Google Chrome, Mozilla Firefox, Opera, Microsoft Edge und Internet Explorer unter Windows. Gehen Sie zu dem Abschnitt für den Browser, der Sie interessiert, um die Schritte zu finden, die Sie durchlaufen müssen.

So aktivieren Sie den mobilen Browser-Emulator in Google Chrome

Laden Sie in Google Chrome die mobile Website, die Sie anzeigen möchten. Klicken oder tippen Sie dann auf die drei vertikalen Punkte in der oberen rechten Ecke. Sie sind die Schaltfläche für "Google Chrome anpassen und steuern". Wählen Sie im folgenden Menü Weitere Tools und dann "Entwicklertools". Die Entwicklerwerkzeuge öffnen sich. Um dasselbe Ergebnis zu erzielen, können Sie auch die Tastenkombination STRG + Umschalt + I auf Ihrer Tastatur drücken.

Klicken oder tippen Sie auf die Schaltfläche "Geräte-Symbolleiste umschalten " (es ist eine kleine Schaltfläche, die aussieht wie ein Smartphone und ein Tablet nebeneinander) oder drücken Sie STRG + Umschalt + M auf Ihrer Tastatur. Dies aktiviert die Gerätesymbolleiste, auf der die mobile Seite geladen ist. Standardmäßig verwendet die Gerätesymbolleiste eine Responsive- Vorlage für die von Ihnen geladene Seite. Klicken Sie darauf und wählen Sie das mobile Gerät, das Sie emulieren möchten: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (von Version 5 bis iPhone X), iPad und iPad Pro. Die mobile Seite wird erneut geladen, als ob Sie das Smartphone oder Tablet verwenden, das Sie aus der Liste ausgewählt haben. Es weiß nicht, dass Sie einen Desktop-Computer verwenden.

Wenn Sie fertig sind, drücken Sie die Schaltfläche " X" (Schließen) in der oberen rechten Ecke der Google Chrome-Entwicklertools, um zum Standard-Desktop-Suchmodus zurückzukehren.

So aktivieren Sie den Browser für mobile Browser in Mozilla Firefox

Öffnen Sie in Mozilla Firefox die mobile Seite, auf die Sie zugreifen möchten, als ob Sie ein mobiles Gerät verwenden würden. Klicken oder tippen Sie dann auf den Burger-Button in der oberen rechten Ecke. Es heißt "Menü öffnen".

Wählen Sie im folgenden Menü Web Developer .

Sie sehen viele Optionen, die für Entwickler nützlich sind. Der, der Sie interessiert, ist "Responsive Design Mode". Klicken oder tippen Sie auf diese Option. Dieser spezielle Modus zum Anzeigen einer Webseite wird jetzt in Firefox geladen. Das gleiche Ergebnis kann erreicht werden, indem Sie STRG + Umschalt + M auf Ihrer Tastatur drücken.

Der Responsive Design-Modus ist aktiviert. In der Mitte des Bildschirms sehen Sie die Parameter, die von diesem Modus verwendet werden. Wenn kein Gerät ausgewählt ist, klicken oder tippen Sie auf die Dropdown-Liste mit Geräten, die für die Emulation verfügbar sind, und wählen Sie das Gerät, das Sie simulieren möchten: Samsung Galaxy S9, iPad, iPhone (von Version 6 bis iPhone X), Kindle Fire HDX, und so weiter. Die mobile Seite wird erneut geladen, als wäre sie auf dem Mobilgerät geladen, das Sie für die Emulation ausgewählt haben.

Wenn Sie fertig sind, drücken Sie die X- Taste (Responsive-Design-Modus schließen), um zum Standard-Desktop-Browsing-Modus zurückzukehren.

So aktivieren Sie den mobilen Browser-Emulator in Opera

Laden Sie in Opera die mobile Seite, die Sie anzeigen möchten, als ob Sie ein mobiles Gerät verwenden würden. Klicken Sie dann auf das Opera-Symbol oben links. Es ist die Schaltfläche "Customize and control Opera" . Wählen Sie in dem Menü, das sich öffnet, Developer aus, gefolgt von Developer tools . Die Developer Tools werden auf der rechten Seite des Browserfensters angezeigt. Das gleiche Ergebnis erzielen Sie, indem Sie die Tastenkombination STRG + Umschalt + I auf Ihrer Tastatur drücken.

Klicken oder tippen Sie dann auf die Schaltfläche "Geräte-Symbolleiste umschalten " (es ist eine kleine Schaltfläche, die aussieht wie ein Smartphone und ein Tablet nebeneinander) oder drücken Sie STRG + Umschalt + M auf Ihrer Tastatur. Dies aktiviert die Gerätesymbolleiste, auf der Ihre Webseite geladen ist. Klicken Sie darauf und wählen Sie das mobile Gerät, das Sie emulieren möchten: Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (von Version 5 bis iPhone X), iPad und iPad Pro. Die mobile Seite wird in Opera neu geladen. Dabei werden die Merkmale des Smartphones oder Tablets verwendet, die Sie in der Liste ausgewählt haben.

Wenn Sie fertig sind, drücken Sie die X (Schließen) -Taste in der oberen rechten Ecke der Opera Developer Tools, um zum Desktop-Browsing zurückzukehren.

So aktivieren Sie den Emulator für mobile Browser in Microsoft Edge

Laden Sie in Microsoft Edge die Website, die Sie anzeigen möchten, als ob Sie ein mobiles Gerät verwenden würden. Klicken oder tippen Sie dann auf die Schaltfläche "Einstellungen und mehr", die sich in der oberen rechten Ecke des Browserfensters befindet. Das Symbol sieht wie drei Punkte aus. Wenn Sie Windows 10 Oktober 2018 Update verwenden, gehen Sie zu "Weitere Tools" und dann zu "Developer Tools". Wenn Sie Windows 10 April 2018 Update oder älter verwenden, wählen Sie F12 Developer Tools . Die Entwicklertools werden am unteren Rand des Browserfensters geöffnet. Sie können das gleiche Ergebnis erzielen, indem Sie F12 auf Ihrer Tastatur drücken, egal wie alt oder neu Ihr Windows 10 ist.

Sie sehen mehrere Registerkarten in den Entwicklertools . Wenn Sie Emulation sehen, klicken oder tippen Sie darauf. Wenn Sie dies nicht tun, klicken oder tippen Sie auf den Abwärtspfeil, und wählen Sie im angezeigten Menü Emulation .

Klicken oder tippen Sie dann auf die Dropdown-Liste Gerät . Sie können folgende Geräte emulieren: Lumia 650, Lumia 950, Lumia 950 XL, Oberflächenbuch, Surface Pro 4, iPad, iPad Mini, Nexus 5, Nexus 5X und Nexus 6P.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche X (Schließen) in der oberen rechten Ecke der Microsoft Edge-Entwicklertools, um zum Desktop-Browsing zurückzukehren.

So aktivieren Sie den Browser für mobile Browser in Internet Explorer

In Internet Explorer die mobile Seite, die Sie anzeigen möchten, als ob Sie ein mobiles Gerät verwenden würden. Klicken Sie auf die Schaltfläche Extras in der oberen rechten Ecke oder drücken Sie ALT + X auf Ihrer Tastatur. Wählen Sie dann F12-Entwicklertools . Die Entwicklertools werden unten im Internet Explorer angezeigt. Das gleiche Ergebnis kann durch Drücken von F12 auf Ihrer Tastatur erreicht werden.

Klicken oder tippen Sie auf die Registerkarte " Emulation" und dann auf die Dropdown-Liste " Browser" . Hier müssen Sie Windows Phone als mobiles Gerät auswählen und die Webseite wird neu geladen, als ob Sie ein Smartphone mit Windows Phone verwenden würden . Leider bietet Ihnen der Internet Explorer keine Möglichkeit, Android-Smartphones oder iPhones und iPads zu emulieren.

Wenn Sie fertig sind, drücken Sie die X (Schließen) -Taste in der oberen rechten Ecke der Entwickler-Tools, um zum Desktop-Browsing zurückzukehren.

Auf welchen Websites müssen Sie ein Mobilgerät emulieren?

Jetzt wissen Sie, wie Sie alle Arten von mobilen Geräten in Ihrem bevorzugten Webbrowser emulieren können. Bevor Sie dieses Tutorial schließen, teilen Sie uns mit, welche Websites Sie für diese Emulation benötigen. Wir sind sehr neugierig. Ist es das (in) berühmte Instagram oder eine andere mobile Seite?