Da wir uns jetzt in einer mobilen Welt befinden, wird es immer wichtiger, Websites einfach auf Mobiltelefonen oder emulierten Mobiltelefonen testen zu können. Ich arbeite mit Menschen zusammen, die an Websites und Social-Media-Angeboten arbeiten, und möchte sie ermutigen, Websites regelmäßig über ihren Desktop-Browser in einer mobilen Ansicht zu öffnen. Ich denke speziell an die integrierte "Mobile View" -Funktion des Browsers, die häufig unter allen anderen Entwicklertools verborgen ist, die ein Browser bietet, aber ich denke gerne über alles nach, was sich genauso schnell einrichten lässt.

Wie können Sie eine mobile Ansicht einer Website über einen Desktop-Browser öffnen?

Feuerfuchs:

• Drücken Sie unter Windows / Linux Ctrl+ Shift+M
• Drücken Sie in macOS option+ command+M

Sie finden den Menüpunkt auch unter ("Tools"), "Web Developer", "Responsive Design Mode".

Chrom:

Sie müssen zuerst "Developer Tools" geöffnet haben:

• Drücken Sie in Windows / Linux Ctrl+ Shift+ Ioder nurF12
• Drücken Sie in macOS option+ command+I

Sobald die Entwicklerwerkzeuge geöffnet und fokussiert sind, können Sie die Gerätesymbolleiste öffnen:

• Drücken Sie unter Windows / Linux Ctrl+ Shift+M
• Drücken Sie in macOS command+ shift+M

Sie können den Menüeintrag auch finden, indem Sie die Entwicklertools ("Weitere Tools", "Entwickler-Tools") öffnen und dann auf das Symbol klicken, das wie ein Mobiltelefon vor einer Tabelle "Gerätesymbolleiste umschalten" aussieht.

Safari:

Es sieht so aus, als hätte Apple die Tastenkombination zum Aufrufen des Responsive Design-Modus standardmäßig deaktiviert. Sie können diesem Tutorial folgen, um eine Tastenkombination dafür zu konfigurieren .

Sie finden den Menüpunkt, indem Sie auf "Entwickeln", "Responsive Design Mode aktivieren" klicken. Wenn Sie das Menüelement "Entwickeln" nicht sehen können, müssen Sie es aktivieren, indem Sie "Einstellungen", "Erweitert" öffnen und "Entwicklungsmenü in Menüleiste anzeigen" aktivieren.

Kante:

• Drücken Sie, F12um die Entwickler - Tools zu öffnen, und dann Ctrl+ 7die „Emulation Tab“ zu öffnen. Konfigurieren Sie das Gerät, das Sie emulieren möchten.

Sie können die Entwicklertools mit der Maus öffnen, indem Sie mit der rechten Maustaste auf die Webseite klicken und "Element überprüfen" auswählen.

Flimms Antwort ist zu 100% richtig. Nur für den Fall, dass das Speichern der Verknüpfungen zu aufwändig ist, können Sie mit dieser blauen Schaltfläche in den Entwicklertools zwischen der Webansicht und der Ansicht für Mobilgeräte / Tablets wechseln:

Oder mit Firefox:

Nachdem Sie die Gerätesymbolleiste aktiviert haben, können Sie Marke und Modell des Geräts, das Sie emulieren möchten, aus dem Dropdown-Menü auswählen.

Zum Testen benutze ich folgende Websites:

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Auf beiden oben genannten Websites kann ich meine Webanwendung in mehreren Gerätebreiten anzeigen.

Fügen Sie in Ihrem Browser eine Erweiterung "User Agent Switcher" hinzu und geben Sie einen mobilen User Agent an. Wenn die Website intelligent genug ist, wird sie Ihnen eine für Mobilgeräte optimierte Version bieten.

Ich werde keine bestimmte Erweiterung empfehlen. Die ideale Version sollte über integrierte Voreinstellungen für mobile Browser verfügen und die Möglichkeit bieten, die Benutzeragentenumschaltung für jede Website einzeln zu aktivieren oder zu deaktivieren.

Die obigen Antworten eignen sich hervorragend für Benutzer, die gerne einen einzelnen Browser verwenden oder nur über einen begrenzten Desktop-Arbeitsbereich verfügen (z. B. einen einzelnen Monitor mit einer Auflösung von weniger als 21 Zoll).

Es gibt tatsächlich eine noch interessantere Lösung, die ich kürzlich entdeckt habe: https://blisk.io/

Ich werde es unterlassen, den (Art) "Affiliate-Link" für persönlichen Gewinn zu verwenden (Es gibt ein "Token-basiertes System", mit dem Sie Credits verdienen können, um Dinge wie kostenlosen "Team-Cloud-Speicher" und "Premium-Funktionen" zu nutzen es), aber Blisk ist eigentlich ziemlich pfiffig.

Dieser Chromium-basierte "Browser für die Entwicklung" bietet eine Vielzahl von Möglichkeiten, die Seite auf verschiedenen Geräten mit einem vertikalen "Bereich" auf der LINKEN Seite zu demonstrieren, ähnlich wie Sie es bei den Chrome Developer Tools in der rechten vertikalen Spalte sehen.

Es ist Arbeit, einen Blick. Obwohl die "erweiterte Freemium-Funktionalität" einige Grenzen hat, funktioniert sie immer noch sehr gut, um sowohl die PC- als auch die Mobilversion Ihrer Seiten / Sites in einem Side-by-Side-Vergleich anzuzeigen. Die kostenpflichtigen Funktionen scheinen auch für die Arbeit in Remote-Teams ziemlich radikal zu sein (obwohl ich persönlich der Meinung bin, dass ein besseres "Probefahrt" -Programm erforderlich ist, bevor die Leute die monatlichen Kosten in Kauf nehmen können).

Vollständige Offenlegung: Auf dem mobilen Vorschauteil gibt es ein EXTREM ärgerliches "Zeitlimit" pro Tag (wechselt vom Symbol rechts in der Adressleiste zum Öffnen / Schließen - ändern Sie die "Gerätevorschau" vom winzigen Link zum Menü in der rechten oberen Ecke "Geräteliste anzeigen").

BliskDemoScreenshot

Außerdem: Ich habe ein paar wirklich raffinierte Tricks mit Browser-Erweiterungen wie den 2 verschiedenen "User-Agent-Umschaltern" von Chrome / Firefox gefunden, mit denen Sie zwischen den Browser-User-Agent-Zeichenfolgen verschiedener Betriebssysteme UND wechseln können die Browser für sie.

Ich bevorzuge die Variante "esolutions.se", da es so einfach ist, benutzerdefinierte User-Agent-Zeichenfolgen für beliebig viele Anpassungen zur Liste hinzuzufügen (wird auch offline ausgeführt, was in bestimmten Fällen nützlich sein kann): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

Wie auch immer, das sind meine 2 Cent. : P