RWD testen
Web-Browser wie Google Chrome und Mozilla Firefox sowie Miscrosoft Edge oder Opera bieten Entwickler Tools an, mit denen man genaue Bildschirmgrößen und auch bekannte Geräte (verschiedene Smartphones, Tablets, Notebooks) simulieren kann.
Unten finden Sie eine kurze Anleitung mit Screenshots zum Testen von Bildschirmgrößen im Web-Browser mit Entwickler Tools.
1) Webbrowser öffnen und die gewünschte Website aufrufen.
2) Entwickler Tools mit den folgenden Tasten bzw. Tastenkombination öffnen:
F12
oder
Strg + ⇧ Umschalt/Shift + I
Alternativ mit der rechten Maustaste auf die Website klicken und dann im Kontext-Menü ganz unten Untersuchen anklicken.
3) In dem neuen Bereich rechts (bzw. unten) das kleine Icon mit zwei Rechtecken (Abbildung von Tablet und Smartphone) anklicken:
Ansicht bei Google Chrome:
Ansicht bei Mozilla Firefox:
4) Die Website-Vorschau wird verkleinert und darüber findet man eine Menüleiste mit Optionen, u.a.:
- Geräte aus der Liste auswählen
- das Gerät-Vorschau umkippen (vertikal/horizontal)
Ansicht bei Google Chrome:
Ansicht bei Mozilla Firefox:
Vorschau eines Browsers mit Entwickler Tools (rechts) und Geräteemulation (links).
Es ist empfohlen das Browser-Fenster zu aktualisieren (neu laden), wenn man das Gerät, die Breite oder die Ausrichtung (hoch/quer) wechselt!
Die Taste um das Browser-Fenster zu aktualisieren ist:
F5
bzw. die Tastenkombination:
Strg + R
Auch direkt im Browser gibt es ein Icon um neu zu laden:
Der einfachste Weg, um Responsive Web Design (RWD) zu testen, ist das Browser-Fenster auf dem Desktop Computer (bzw. Laptop oder Notebook) in der Breite und Höhe anpassen:
– zuerst das Browser-Fenster verkleinern:
– das Browser-Fenster an der Breite oder Ecke ziehen:
Bei Veränderung der Breite bitte das Browser-Fenster neu laden!
„Flüssige“ Elemente in responsivem Webdesign an einer Muster-Seite testen – den Button unten anklicken und die Gerät-Vorschau an die Ecke ziehen (um die Höhe und Breite zu verändern) und das Verhalten der Elemente zu beobachten (funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge).
Testen von flüssigen Elementen im Responsive Webdesign ist nur auf einem größerem Bildschirm möglich.