So zeigen Sie die mobile Version einer Website auf einem PC an

Wenn Sie Webentwickler sind oder ein Online-Unternehmen besitzen, möchten Sie vielleicht wissen, wie eine mobile Website auf einem Desktop aussieht. Das Erscheinungsbild und die Funktionalität Ihrer mobilen Website können von entscheidender Bedeutung sein, da mehr als die Hälfte des Internetverkehrs über Mobiltelefone erfolgt. Kunden bleiben eher länger auf einer Website oder kaufen etwas, wenn sie optisch ansprechend ist. Eine Desktop-Ansicht könnte Ihnen auch dabei helfen, Änderungen vorzunehmen und mögliche Probleme früher zu beheben.

So zeigen Sie die mobile Version einer Website auf einem PC an

Glücklicherweise ist dies ein relativ unkomplizierter Prozess. In diesem Artikel zeigen wir Ihnen, wie Sie eine mobile Version einer Website auf verschiedenen Geräten und Browsern anzeigen.

So zeigen Sie die mobile Version einer Website in Chrome auf einem Mac an

In Chrome können Sie das Frontend testen und sehen, ob alle Komponenten der Website ordnungsgemäß funktionieren, indem Sie ein integriertes Entwicklertool namens DevTools verwenden. Da DevTools vordefinierte Geräteoptionen bereitstellt, ist es die beste Möglichkeit für Entwickler, die Ansicht schnell und ohne Entwicklererweiterungen vom Desktop auf das Mobilgerät und umgekehrt umzustellen.

Sie können auch die Bildschirmgröße an Ihre Bedürfnisse anpassen und die Bildschirmbreite und -höhe anpassen, um zu sehen, wie Ihre Website auf verschiedenen Bildschirmgrößen aussieht. Gehen Sie dazu auf einem Mac wie folgt vor:

  1. Starten Sie den Google Chrome-Browser und rufen Sie die Website auf, die Sie anzeigen möchten.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  2. Drücken Sie F12 auf Ihrer Tastatur, um auf DevTools zuzugreifen.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  3. Wenn der Modus aktiviert ist, klicken Sie auf das Symbol „Geräteemulation umschalten“.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  4. Sie können aus einer Liste von iOS- und Android-Geräten auswählen, um diese zu emulieren.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  5. Die Website wird in der von Ihnen gewählten mobilen Form angezeigt.
    So zeigen Sie die mobile Version einer Website auf einem PC an

Wenn Sie fertig sind, schließen Sie einfach das Entwicklertools-Fenster, um die mobile Version der Website zu schließen.

So zeigen Sie die mobile Version einer Website in Chrome auf einem Windows-PC an

Wenn Sie eine mobile Version einer Website auf einem Windows-PC in Chrome anzeigen möchten, ist der Vorgang ziemlich ähnlich:

  1. Öffnen Sie den Chrome-Browser.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  2. Gehen Sie in Chrome zu der Website, die Sie in der mobilen Version sehen möchten.
  3. Klicken Sie mit der rechten Maustaste auf die Webseite und wählen Sie „Inspizieren“ aus dem Menü.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  4. Um zu den Entwicklertools zu gelangen, klicken Sie auf die Registerkarte „Weitere Tools“ und wählen Sie „Entwicklertools“ oder drücken Sie F12, um DevTools zu öffnen.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  5. Das Fenster „Entwicklertools“ wird geöffnet.
  6. Klicken Sie auf das Geräte-Umschaltsymbol, um in den mobilen Site-Ansichtsmodus zu wechseln.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  7. Wählen Sie das Mobilgerät aus, das Sie emulieren möchten (optional).
    So zeigen Sie die mobile Version einer Website auf einem PC an
  8. Sie können nun die Abmessungen des Bildschirms an Ihre Bedürfnisse anpassen.

So zeigen Sie die mobile Version einer Website in Chrome auf einem Chromebook an

Der Zugriff auf die mobile Version einer Website in Chrome mit einem Chromebook ist den ersten beiden Methoden sehr ähnlich.

  1. Öffnen Sie den Webbrowser Google Chrome.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  2. Öffnen Sie die Webseite, auf die Sie zugreifen möchten, auf Ihrem Mobilgerät.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  3. Um auf das Menü zuzugreifen, klicken Sie auf das vertikale Symbol mit den drei Punkten.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  4. Ziehen Sie Ihre Maus über das Element „Weitere Tools“ in der Liste.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  5. Wählen Sie „Entwicklertools“.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  6. Das Fenster „Entwicklertools“ im Browser wird geöffnet.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  7. Schalten Sie den Anzeigemodus für mobile Websites um, indem Sie auf das Symbol zum Umschalten des Geräts klicken.
    So zeigen Sie die mobile Version einer Website auf einem PC an

Dadurch wird die Benutzeroberfläche für die mobile Website angezeigt. Sie können das bevorzugte Geräteerlebnis auch auswählen, indem Sie Marke und Modell aus dem Dropdown-Feld auswählen. Die Webseite wird als Desktop-Site aktualisiert, wenn Sie die Entwicklertools-Konsole schließen.

So zeigen Sie die mobile Version einer Website in Firefox auf einem Mac an

Sie können andere Webbrowser wie Firefox verwenden, um eine mobile Website auf einem Mac-Desktop anzuzeigen. Die Größenänderung des Browserfensters ist eine der Methoden, mit denen die meisten Webentwickler die Responsive-Design-Website bewerten. In den meisten Fällen erscheint diese Alternative jedoch nicht akzeptabel.

Hier kommen die Webentwicklungsfunktionen des Firefox-Browsers zum Einsatz. Sie können Ihre Webseiten in mehreren Auflösungen durchsuchen, wenn Sie wissen, wie Sie in Firefox auf mobile Versionen von Websites zugreifen. Folge diesen Schritten:

  1. Öffnen Sie die mobile Version der Website, die Sie sehen möchten.
  2. Klicken Sie mit der rechten Maustaste auf die Webseite und wählen Sie im Menü die Option „Inspizieren“.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  3. Wählen Sie den „Responsive Design-Modus“.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  4. Wählen Sie die Bildschirmgröße der Website.
    So zeigen Sie die mobile Version einer Website auf einem PC an

So zeigen Sie die mobile Version einer Website in Firefox auf einem Windows-PC an

Auf Windows-PCs besteht außerdem die Möglichkeit, mobile Versionen von Websites mit Firefox anzuzeigen. So geht's:

  1. Starten Sie Firefox auf Ihrem PC.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  2. Gehen Sie zu der Website, die Sie als mobile Version sehen möchten.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  3. Gehen Sie zu „Einstellungen“, indem Sie auf das horizontale Symbol mit den drei Balken klicken.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  4. Sie sehen ein Dropdown-Menü, in dem Sie die Option „Webentwickler“ auswählen müssen.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  5. Wählen Sie „Responsive Design-Modus“.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  6. Schließlich können Sie ein Smartphone-Modell auswählen, um zu sehen, wie Ihre Website auf diesem Gerät angezeigt wird.
    So zeigen Sie die mobile Version einer Website auf einem PC an

So zeigen Sie die mobile Version einer Website in Safari auf einem Mac an

Wir haben erläutert, wie Sie mit Chrome und Firefox eine mobile Website auf einem Desktop anzeigen. Aber was ist mit dem Standardbrowser, der mit Mac-Geräten geliefert wird, Safari? Glücklicherweise ist es auch möglich, eine mobile Version einer Website in Safari anzuzeigen.

  1. Starten Sie den Safari-Browser.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  2. Gehen Sie zu der Website, die Sie als mobile Version ansehen möchten.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  3. Klicken Sie auf „Optionen“ und dann auf das Menü „Entwickeln“.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  4. Wählen Sie im Dropdown-Menü „Responsive Design-Modus aktivieren“ aus.
    So zeigen Sie die mobile Version einer Website auf einem PC an
  5. Sie können jetzt die mobile Version der Website anzeigen.
    So zeigen Sie die mobile Version einer Website auf einem PC an

Zusätzliche FAQ

Kann ich die Desktop-Version einer Website auf meinem Telefon anzeigen?

Die Antwort ist ja! Sie können von der mobilen Version zur Desktop-Version wechseln, um es ohne Computer auszuprobieren. Die Schritte zur Umstellung der mobilen Version auf die Desktop-Version in Chrome sind wie folgt:

1. Gehen Sie zu der Website, die Sie in der Desktop-Ansicht sehen möchten.

2. Tippen Sie auf das Dreipunktsymbol, um auf das Menü zuzugreifen.

3. Wählen Sie nun die Option „Desktop-Ansicht“.

Beachten Sie, dass diese Schritte je nach verwendetem Telefon variieren können.

Vereinfachtes mobiles Webdesign

Die Entwicklertools eignen sich hervorragend zum Analysieren und Ändern einer mobilen Version einer Website auf einem Desktop, ohne das Gerät wechseln zu müssen. Sie können die Bildschirmgröße ändern, um zu beobachten, wie die Komponenten auf verschiedenen Geräten funktionieren. Sie können verschiedene Komponenten anpassen und die Website mithilfe des Responsive-Modus für mehrere Bildschirmgrößen erstellen.

Beim Entwerfen einer Website sollte der Designer immer berücksichtigen, wie das Frontend der Website auf Telefonen, Tablets und Desktops angezeigt wird. Die Verwendung der im Artikel beschriebenen Methoden kann dem Entwickler auch dabei helfen, dies zu tun und auch zu identifizieren, welche Komponenten einer Website Probleme verursachen, um diese zu beheben.

Haben Sie schon einmal versucht, eine mobile Version einer Website auf Ihrem Desktop anzuzeigen? Welchen Browser verwenden Sie dafür am liebsten? Lassen Sie es uns im Kommentarbereich unten wissen.

Sign up and earn $1000 a day ⋙

Leave a Comment

So beheben Sie den Fehler „Wir benötigen Ihr aktuelles Windows-Passwort“ unter Windows 10/11

So beheben Sie den Fehler „Wir benötigen Ihr aktuelles Windows-Passwort“ unter Windows 10/11

Erhalten Sie die Fehlermeldung „Wir benötigen Ihr aktuelles Windows-Passwort noch einmal“? Dieses lästige Popup kann Sie daran hindern, Ihre Aufgaben zu erledigen.

Beheben Sie schnell den Fehler „Unmountable Boot Volume“ unter Windows 10/11

Beheben Sie schnell den Fehler „Unmountable Boot Volume“ unter Windows 10/11

Der Fehler „Unmountable Boot Volume“ tritt auf, weil installierte Software Konflikte mit dem Betriebssystem verursacht oder weil der Computer plötzlich herunterfährt. Im folgenden Artikel zeigt Ihnen WebTech360 einige Möglichkeiten zur Behebung dieses Fehlers.

So beheben Sie den Zwischenablageverlaufsfehler im neuesten Windows 11-Update

So beheben Sie den Zwischenablageverlaufsfehler im neuesten Windows 11-Update

Wenn Sie den Zwischenablageverlauf zum Speichern von Daten für die spätere Verwendung verwenden, besteht eine geringe Wahrscheinlichkeit, dass die Daten leer bleiben, egal was Sie versuchen.

So entfernen Sie Copilot und andere KI-Funktionen in Windows

So entfernen Sie Copilot und andere KI-Funktionen in Windows

Wenn Sie keine Lust haben, zusätzliche Bloatware auf Ihrem System zu haben, gibt es Möglichkeiten, Windows Copilot unter Windows 11 zu entfernen oder zu deaktivieren.

Warum ist die Schätzung des Laptop-Akkuprozentsatzes nie genau?

Warum ist die Schätzung des Laptop-Akkuprozentsatzes nie genau?

Die meisten Laptop-Nutzer kennen die Situation: Windows zeigt eine verbleibende Akkulaufzeit von zwei Stunden an, fünf Minuten später springt die Anzeige auf fünf Stunden oder sogar nur eine Stunde. Warum springt diese Zeit so hin und her?

10 Windows 11-Einstellungen zur Maximierung der Akkulaufzeit Ihres Laptops

10 Windows 11-Einstellungen zur Maximierung der Akkulaufzeit Ihres Laptops

Laptop-Akkus lassen mit der Zeit nach und verlieren an Kapazität, was zu einer kürzeren Akkulaufzeit führt. Nach einigen detaillierten Anpassungen der Windows 11-Einstellungen sollte sich die Akkulaufzeit jedoch deutlich verbessern.

Microsoft spammt Copilot-QR-Codes auf dem Sperrbildschirm von Windows 11, um Benutzer anzulocken

Microsoft spammt Copilot-QR-Codes auf dem Sperrbildschirm von Windows 11, um Benutzer anzulocken

Im Jahr 2023 setzte Microsoft stark auf künstliche Intelligenz und seine Partnerschaft mit OpenAI, um Copilot Wirklichkeit werden zu lassen.

So deaktivieren Sie Benutzerkonten unter Windows 11

So deaktivieren Sie Benutzerkonten unter Windows 11

Sie können Benutzerkonten deaktivieren, sodass andere nicht mehr auf Ihren Computer zugreifen können.

So schalten Sie den Batteriesparmodus auf einem Windows 11-Laptop ein und aus

So schalten Sie den Batteriesparmodus auf einem Windows 11-Laptop ein und aus

Der Batteriesparmodus von Windows 11 ist eine Funktion zur Verlängerung der Akkulaufzeit von Laptops.

Microsoft bringt neue Haftnotiz-App für Windows 11 auf den Markt

Microsoft bringt neue Haftnotiz-App für Windows 11 auf den Markt

Nachdem die Dinge jahrelang gleich geblieben waren, änderte das Sticky Note-Update Mitte 2024 alles.

So beheben Sie den IRQL NOT LESS OR EQUAL-Fehler unter Windows

So beheben Sie den IRQL NOT LESS OR EQUAL-Fehler unter Windows

Der IRQL NOT LESS OR EQUAL-Fehler ist ein speicherbezogener Fehler, der normalerweise auftritt, wenn ein Systemprozess oder Treiber versucht, ohne entsprechende Zugriffsberechtigungen auf eine Speicheradresse zuzugreifen.

6 Möglichkeiten zum Kopieren von Datei- und Ordnerpfaden in Windows 11

6 Möglichkeiten zum Kopieren von Datei- und Ordnerpfaden in Windows 11

Pfade sind die Speicherorte von Dateien oder Ordnern in Windows 11. Alle Pfade enthalten die Ordner, die Sie öffnen müssen, um zu einem bestimmten Speicherort zu gelangen.

Vergleichen Sie Windows 10 und Windows 11

Vergleichen Sie Windows 10 und Windows 11

Windows 11 ist offiziell gestartet. Im Vergleich zu Windows 10 weist Windows 11 viele Änderungen auf, von der Benutzeroberfläche bis hin zu neuen Funktionen. Weitere Informationen finden Sie im folgenden Artikel.

So laden Sie Windows 11 herunter: Laden Sie die offizielle Win 11 ISO von Microsoft herunter

So laden Sie Windows 11 herunter: Laden Sie die offizielle Win 11 ISO von Microsoft herunter

Derzeit ist Windows 11 offiziell gestartet und wir können die offizielle Windows 11-ISO-Datei oder die Insider Preview-Version zur Installation herunterladen.

Herunterladen, Aktualisieren und Beheben von Problemen mit USB-Treibern unter Windows 10

Herunterladen, Aktualisieren und Beheben von Problemen mit USB-Treibern unter Windows 10

USB-Geräte sind aus unserem Alltag nicht mehr wegzudenken und ermöglichen uns den Anschluss einer großen Bandbreite wichtiger Hardware an unseren PC.