Viewport-Emulator im Firefox

[Matthias Scharwies]

Guten Morgen,

Kannst du ein wenig beschreiben, wofür du die aktuelle Breite des Bildschirms (also des Geräts) bzw. des Viewports (d.h. des Firefox-Fensters) brauchst? Dann kann ich beispielsweise eine kleine Demo auf CodePen oder Ähnlichem basteln.

So etwas gibt es im Wiki: JavaScript/Window/innerWidth ^[1]

Ich möchte entweder irgendwo auf dem Bildschirm oder in einer zweiten Tab neben meiner Testanwendung die Breite sehen, wenn ich den Viewport in winzigen Schritten vergrößere oder verkleinere.

Ich habe im Wiki mal die entsprechende Seite aufgerufen: Viewport

Dort gab es leider noch keinen Link zum Artikel über die Arbeit mit den Entwicklerwerkzeugen:

• Arbeiten mit dem Seiteninspektor#Debugging auf Mobilgeräten

Diesen Abschnitt habe ich heute um diesen Screenshot (und etwas Text) ergänzt^[2]:

Diesen Emulator startet man mit [STRG]+[SHIFT]+[m]

Anstelle des Screenshots bräuchte man hier einen kurzen Film, der zeigt, wie bei verändernder Viewportbreite die media queries greifen und die Seitenelemente neben- anstelle untereinander platziert werden.

Herzliche Grüße
Matthias Scharwies

---

1. Im Prinzip gibt es alles im Wiki, man muss es nur finden.
   Ich habe da immer zwei Fragen:
   1 Kann man die Verlinkung verbessern?
   2 Sollte man die betreffenden Seite ergänzen? ↩︎

2. Das wäre mir ein Anliegen: Kein Snippet im Forum oder Beispiele auf CodePen, sondern ein fachlich richtiger, gut zu lesender Artikel, auf den man später immer wieder verlinken kann, der aber auch im Wiki auffindbar ist. ↩︎