Da wir uns heute in einer Welt befinden, in der mobile Endgeräte an erster Stelle stehen, wird es immer wichtiger, Websites problemlos auf Mobiltelefonen oder emulierten Mobiltelefonen testen zu können. Ich arbeite mit Leuten zusammen, die an Websites und Social-Media-Angeboten arbeiten, und ich möchte sie dazu ermutigen, Websites regelmäßig in einer mobilen Ansicht von ihren Desktop-Browsern aus zu öffnen. Dabei denke ich insbesondere an die integrierte „mobile Ansicht“-Funktion des Browsers, die oft zwischen all den anderen Entwicklertools eines Browsers versteckt ist, aber ich ziehe gerne alles in Betracht, was genauso schnell einzurichten ist.
Wie können Sie von einem Desktop-Browser aus eine mobile Ansicht einer Website öffnen?
Antwort1
Feuerfuchs:
- Unter Windows/Linux drücken Sie Ctrl+ Shift+M
- Unter macOS drücken Sie option+ command+M
Sie finden den Menüpunkt auch unter („Tools“), „Webentwickler“, „Responsive Design-Modus“.
Chrome und Edge:
Sie müssen zuerst „Developer Tools“ öffnen:
- Unter Windows/Linux drücken Sie Ctrl+ Shift+ Ioder einfachF12
- Unter macOS drücken Sie option+ command+I
Sobald die Entwicklertools geöffnet und fokussiert sind, können Sie die Geräteemulation umschalten:
- Unter Windows/Linux drücken Sie Ctrl+ Shift+M
- Unter macOS drücken Sie command+ shift+M
In der Symbolleiste der Entwicklertools gibt es eine kleine Schaltfläche, die die Geräteemulation aktiviert, falls Sie lieber auf eine Schaltfläche klicken möchten, anstatt eine Tastenkombination zu drücken.
Safari:
Es sieht so aus, als ob Apple die Tastenkombination zum Aufrufen des Responsive Design-Modus standardmäßig deaktiviert hat. Sie können folgendieses Tutorial zum Konfigurieren einer Tastenkombination dafür.
Sie finden den Menüpunkt, indem Sie auf „Entwickeln“ und „Responsive Design-Modus aktivieren“ klicken. Wenn Sie den Menüpunkt „Entwickeln“ nicht sehen können, müssen Sie ihn aktivieren, indem Sie „Einstellungen“, „Erweitert“ öffnen und „Entwicklermenü in Menüleiste anzeigen“ ankreuzen.
Antwort2
Flimms Antwortist 100% korrekt. Falls es zu mühsam ist, sich die Tastenkombinationen zu merken, gibt es in den Entwicklertools diesen blauen Button, um zwischen der Webansicht und der Mobil-/Tablet-Ansicht umzuschalten:
Oder mit Firefox:
Nachdem Sie die Gerätesymbolleiste aktiviert haben, können Sie aus dem Dropdown-Menü Marke und Modell des Geräts auswählen, das Sie emulieren möchten.
Antwort3
Zu Testzwecken verwende ich die folgenden Websites: -
Auf beiden oben genannten Websites kann ich meine Webanwendung auf mehreren Gerätebreiten anzeigen.
Antwort4
Fügen Sie Ihrem Browser eine „User Agent Switcher“-Erweiterung hinzu und geben Sie einen mobilen User Agent an. Wenn die Websiteschlaugenug, es wird Ihnen eine für Mobilgeräte optimierte Version bereitgestellt.
Ich werde keine bestimmte Erweiterung empfehlen. Die ideale Erweiterung sollte integrierte Voreinstellungen für mobile Browser und die Möglichkeit haben, den User-Agent-Wechsel für jede Website einzeln zu aktivieren oder zu deaktivieren.