So zeigen Sie Webseiten wie auf dem Handy mit Google Chrome an

Der Smartphone-Markt hört nicht auf zu wachsen. Sogar Google belohnt alle „webfreundlichen“ Seiten in seinen Suchmaschinenergebnissen. Aus diesem Grund werden immer mehr Websites so optimiert, dass sie auf allen Arten von mobilen Geräten korrekt geöffnet werden können, selbst wenn man die Desktop-Versionen beiseite lässt oder einige Funktionen oder Inhalte darin einschränkt. Webbrowser, wie z Google Chrome , erkennen, woher wir eine Website laden (ein PC, ein Handy, ein Tablet usw.) und fordern die entsprechende Version vom Server an. Aber zum Glück ist es sehr einfach, den Server zu täuschen.

Wenn wir den Webbrowser verwenden, sind wir es normalerweise gewohnt, eine URL einzugeben oder direkt eine Suchanfrage in der Suchmaschine zu stellen und auf die Ergebnisse zu warten. Aber wissen wir wirklich alles, was darunter passiert, wenn wir dies tun?

Anzeigen von Webseiten wie auf dem Handy mit Google Chrome

Die Chrome Developer Console

Alle Webbrowser, insbesondere Chrome, bieten alle Arten von Funktionen und Tools für alle Benutzer. Einer von ihnen ist der Entwicklungskonsole . Wie der Name schon sagt, ist dies eine Konsole, die so konzipiert ist, dass Webdesigner sehen können, wie ihre Website funktioniert, alles, was im Frontend passiert, im Detail wissen und verschiedene Änderungen und Anpassungen auf der Seite „on the fly“ testen können.

Wir können diese Konsole jederzeit öffnen, indem wir einfach die F12-Taste auf unserer Tastatur. Wir können diese Konsole auch öffnen, indem wir mit der rechten Maustaste irgendwo auf eine Seite klicken und das ” Inspizieren ”-Option oder mit der Tastenkombination Strg + Umschalt + I. Dies wird (standardmäßig, obwohl wir es ändern können) im rechten Teil des Fensters geöffnet und von dort aus können wir eine große Anzahl von Optionen sehen.

Google Chrome - Webcomo en el móvil 1

Wir werden in der Lage sein, den kompletten HTML-Code zu sehen der Seite, die wir geöffnet haben, alle Elemente, die sie bilden, jede einzelne Verbindung, die mit dem Server hergestellt wird, die Leistung der Seite, der Speicherverbrauch … Absolut alles, was mit dem Web zu tun hat.

Wir können Elemente zum Code hinzufügen , ändern Sie jeden Punkt auf der Seite, entfernen Sie Inhalte, die uns nicht interessieren, sehen Sie Fehler, erkennen Sie mögliche Engpässe oder Probleme, die sich negativ auf die SEO des Webs auswirken können … die Möglichkeiten sind endlos. Wir können sogar Code direkt von Ihrer Konsole in die Seite einfügen, um zu sehen, wie sie reagiert.

Natürlich müssen wir bedenken, dass die Änderungen, die wir von dieser Konsole aus vornehmen, lokal sind. Wir hacken die betreffende Website nicht und speichern auch keine Änderungen. Um die Seite erneut zu laden, müssen wir nur F5 drücken, um sie zu aktualisieren, und sie kehrt in ihren ursprünglichen Zustand zurück.

Um die Konsole zu schließen, können wir erneut die F12-Taste verwenden oder einfach auf die Schaltfläche zum Schließen klicken, die wir oben rechts in dieser Entwicklungskonsole finden.

Ändern Sie den Anzeigetyp einer Website

Eines der interessantesten Tools, die wir in dieser Entwicklungskonsole finden können, ist die Möglichkeit, den Gerätetyp zu ändern, der das Laden der Seite simuliert. Standardmäßig verwendet Chrome die Eigenschaften unseres PCs (d. h., es zeigt dem Server an, dass wir ein Computer sind und Je nach Auflösung und Proportion des Bildschirms ist es zeigt die entsprechende Seite an), um die Seite anzuzeigen. Wenn das Web jedoch responsive ist, kann sich dies ändern.

Um dies zu tun, öffnen wir die Entwicklungswerkzeuge, die wir gerade im vorherigen Punkt gesehen haben, und sehen uns ein kleines Symbol an, das oben links in diesem Abschnitt angezeigt wird.

Google Chrome - Webcomo en el móvil 2

Dieses Symbol ermöglicht es uns, die Ansichtsart des Webbrowsers schnell zu ändern. Sobald wir darauf klicken, können wir sehen, wie es geht die größe der seite ändert sich , und die Art und Weise, in der die Elemente geladen werden. Wenn dies nicht der Fall ist, müssen wir möglicherweise F5 drücken, um neu zu laden.

Google Chrome - Webcomo en el móvil 3

Oben sehen wir eine Leiste, von der aus wir verschiedene Aspekte dieser mobilen Ansicht ändern können. Zum Beispiel können wir simulieren wie das Web auf einem bestimmten Gerät aussehen würde , oder passen Sie die Zoomstufen an. Wir können die Abmessungen des Bildschirms auch manuell in Pixeln angeben, wenn sich keine der standardmäßig angebotenen Optionen an das anpasst, wonach wir suchen.

Google Chrome - Webcomo en el móvil 4

Eine sehr interessante Schaltfläche, die wir auch finden können, ist die, mit der wir den Computerbildschirm drehen können. So können wir sehen, wie das Web aussehen würde, wenn Benutzer es im Querformat spielen.

Google Chrome - Webcomo en el móvil 5

Wenn wir die gewünschten Tests durchgeführt haben, können wir diesen Modus einfach verlassen, indem wir die Entwicklerkonsole schließen. Auch hier müssen wir möglicherweise die Seite aktualisieren, damit sie wieder korrekt angezeigt wird.

Chrome-Erweiterungen

Neben der Entwicklerkonsole können wir dies auch mit einigen Erweiterungen tun, die wir im Chrome Store völlig kostenlos finden. Einige der besten sind wie folgt:

Mobile Ansichtswechsler

Diese Erweiterung ermöglicht es uns, mit einem Klick zwischen der normalen Ansicht und der mobilen Ansicht zu wechseln. Bei der Installation erstellt es ein Symbol in der Symbolleiste, das als Schalter fungiert, je nachdem, ob wir es aktivieren oder deaktivieren möchten. Standardmäßig simuliert es einen iOS 14-System, aber wir können es ändern und die Erweiterung nach unseren Wünschen anpassen.


Responsiver Betrachter

Ein weiteres sehr nützliches Tool für Entwickler, um zu überprüfen, wie gut ihre responsiven Websites funktionieren. Dadurch können wir mehrere Bildschirme unterschiedlicher Größe gleichzeitig sehen. Auf diese Weise können wir mehrere Konfigurationen im Blick haben und überprüfen, ob alles richtig aussieht und bei keinem Gerätetyp Probleme gibt.


Mobilsimulator für Chrome

Mit diesem Tool können wir eine große Anzahl realer Geräte simulieren (5 Android Modelle, 15 Apple, 4 Tablets und 4 Spezialgeräte), um sehen zu können, wie die Seiten je nach angefordertem CSS je nach Bildschirmgröße aussehen.


Responsive Webdesign-Tester

Schließlich ermöglicht uns diese Erweiterung, obwohl sie weniger bekannt ist, gründlich zu testen, wie responsive Ansichten einer Website basierend auf mehreren verschiedenen Parametern funktionieren. Es ermöglicht uns, mit verschiedenen Handys zu testen, darunter standardmäßig die gängigsten Auflösungen und Proportionen. Außerdem sendet diese Erweiterung den entsprechenden User-Agent an den Server, damit die Ergebnisse genauer sind. Es funktioniert sogar offline, was nicht alle Erweiterungen tun.